usePrevious: migrate to typescript & add unit test

Author: clairep94

client/common/usePrevious.test.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { render, screen } from '../test-utils';
+import usePrevious from './usePrevious';
+
+function TestComponent({ value }: { value: number }) {
+  const prev = usePrevious(value);
+
+  return (
+    <div>
+      <div>current: {value}</div>
+      <div>previous: {prev ?? 'undefined'}</div>
+    </div>
+  );
+}
+
+describe('usePrevious', () => {
+  it('should return undefined on first render and previous value after update', () => {
+    const { rerender } = render(<TestComponent value={1} />);
+
+    // First render: previous should be undefined
+    expect(screen.getByText('current: 1')).toBeInTheDocument();
+    expect(screen.getByText('previous: undefined')).toBeInTheDocument();
+
+    // Update value
+    rerender(<TestComponent value={2} />);
+
+    // Second render: previous should be 1
+    expect(screen.getByText('current: 2')).toBeInTheDocument();
+    expect(screen.getByText('previous: 1')).toBeInTheDocument();
+
+    // Update value again
+    rerender(<TestComponent value={3} />);
+
+    expect(screen.getByText('current: 3')).toBeInTheDocument();
+    expect(screen.getByText('previous: 2')).toBeInTheDocument();
+  });
+});

client/common/usePrevious.ts

@@ -1,7 +1,12 @@
 import { useEffect, useRef } from 'react';
 
-export default function usePrevious(value) {
-  const ref = useRef();
+/**
+ * Used in Menubar to store the previous value of a number.
+ * @param value - The current value to track.
+ * @returns The previous value before the current render, or undefined if none.
+ */
+export default function usePrevious(value: number): number | undefined {
+  const ref = useRef<number>();
 
   useEffect(() => {
     ref.current = value;