Infra/useDidUpdate (#1112)

* created useDIdUpdate hook

* added unittests to cover useDidUpdate hook

* useDidUpdate export

* typescript

* remove unused

* remove unused

* naming

* Avoid re run isEqual again by using useMemo + match dependencies type

* PR Comment - logic is based on another useEffect check

Author: mendyEdri

generatedTypes/hooks/index.d.ts

@@ -1 +1,2 @@
 export { default as useToggleValue } from './useToggleValue';
+export { default as useDidUpdate } from './useDidUpdate';

generatedTypes/hooks/useDidUpdate/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This hook avoid calling useEffect on the initial value of his dependency array
+ */
+declare const useDidUpdate: (callback: () => void, dep: [any]) => void;
+export default useDidUpdate;

generatedTypes/index.d.ts

@@ -21,8 +21,7 @@ export {
   PaddingModifiers,
   TypographyModifiers,
   ColorsModifiers,
-  BackgroundColorModifier,
-  useToggleValue
+  BackgroundColorModifier
 } from './commons/new';
 export {default as ActionBar, ActionBarProps} from './components/actionBar';
 export {default as Avatar, AvatarPropTypes, AvatarProps} from './components/avatar';

src/hooks/index.ts

@@ -1 +1,2 @@
 export {default as useToggleValue} from './useToggleValue';
+export {default as useDidUpdate} from './useDidUpdate';

src/hooks/useDidUpdate/__tests__/useDidUpdate.spec.js

@@ -0,0 +1,69 @@
+import {renderHook} from '@testing-library/react-hooks';
+import useDidUpdate from '../index';
+
+describe('useDidUpdate hook tests', () => {
+  it('Expect action to not be called when the dependencies array value hasn\'t change', () => {
+    const action = jest.fn();
+    const dependencies = [false, 'false'];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    rerender();
+    rerender();
+    rerender();
+    expect(action.mock.calls.length).toBe(0);
+  });
+
+  it('Expect action to be called when dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, 'YES YES', 1];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, 'NO NO', 1];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action to be called when dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, 'YES YES', 1];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, 'NO NO', 1];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action to be called when dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, 'YES YES', 1];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, 'NO NO', 1];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action to be called when object value in dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, [1, 2], {name: 'AAA', address: {number: 10}}];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, [1, 2], {name: 'BBB'}];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+    
+    dependencies = [false, [1, 2], {name: 'AAA', address: {number: 20}}];
+    rerender();
+    expect(action.mock.calls.length).toBe(2);
+  });
+
+  it('Expect action to be called when value in array dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, [1, [2]], {name: 'AAA'}];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, [1, [3]], {name: 'AAA', address: {number: 20}}];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+});

src/hooks/useDidUpdate/index.ts

@@ -0,0 +1,22 @@
+import {useEffect, useRef} from 'react';
+import _ from 'lodash';
+
+/**
+ * This hook avoid calling useEffect on the initial value of his dependency array
+ */
+const useDidUpdate = (callback: () => void, dep: [any]) => {
+  const isMounted = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      return;
+    }
+    callback();
+  }, [dep]);
+
+  useEffect(() => {
+    isMounted.current = true;
+  }, []);
+};
+
+export default useDidUpdate;