Add: Add a usePreviousValue hook

Add a new hooks that allows to get the previous value after the value is
changed. For example this hook can be used to check whether a filter has
changed.

src/web/hooks/__tests__/usePreviousValue.jsx

@@ -0,0 +1,41 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {useState} from 'react';
+
+import {describe, test, expect} from '@gsa/testing';
+
+import {fireEvent, render, screen} from 'web/utils/testing';
+
+import usePreviousValue from '../usePreviousValue';
+
+const TestComponent = () => {
+  const [value, setValue] = useState(0);
+  const previousValue = usePreviousValue(value);
+  return (
+    <>
+      <button onClick={() => setValue(1)}></button>
+      <span data-testid="value">{value}</span>
+      <span data-testid="previousValue">{'' + previousValue}</span>
+    </>
+  );
+};
+
+describe('usePreviousValue', () => {
+  test('should return the previous value', () => {
+    render(<TestComponent />);
+
+    const value = screen.getByTestId('value');
+    const previousValue = screen.getByTestId('previousValue');
+
+    expect(value).toHaveTextContent('0');
+    expect(previousValue).toHaveTextContent('undefined');
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(value).toHaveTextContent('1');
+    expect(previousValue).toHaveTextContent('0');
+  });
+});

src/web/hooks/usePreviousValue.js

@@ -0,0 +1,35 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {useEffect, useRef} from 'react';
+
+/**
+ * React custom hook to store the value of the previous rendering
+ *
+ * It allows for checking if a value has changed since last render.
+ *
+ * Code Snippet
+ *
+ * ```
+ * const [value, setValue] = useState(initialValue);
+ * const previousValue = usePrevious(value);
+ *
+ * if (value !== previousValue) { // value has changed
+ *     doSomething()
+ * }
+ * ```
+ */
+const usePreviousValue = value => {
+  const ref = useRef(); // initially the previous value is undefined
+
+  useEffect(() => {
+    // will be called AFTER the calling component has rendered
+    ref.current = value;
+  });
+
+  return ref.current;
+};
+
+export default usePreviousValue;