fix: memoize useNavigation hook

erictaylor · Oct 6, 2021 · e52efbc · e52efbc
1 parent b256f8e
commit e52efbc
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 11 deletions.
diff --git a/src/hooks/__tests__/useNavigation.test.tsx b/src/hooks/__tests__/useNavigation.test.tsx
@@ -4,19 +4,27 @@ import { RouterProvider } from '../../components/RouterProvider';
 import type { RouterContextProps } from '../../types';
 import { useNavigation } from '../useNavigation';
 
-const ContextWrapper = ({ children }: { children: ReactNode }) => {
+const defaultMockHistory = {
+  block: 'mockHistoryBlock',
+  go: 'mockHistoryGo',
+  goBack: 'mockHistoryBack',
+  goForward: 'mockHistoryForward',
+  push: 'mockHistoryPush',
+  replace: 'mockHistoryReplace',
+};
+
+const ContextWrapper = ({
+  children,
+  history = defaultMockHistory,
+}: {
+  children?: ReactNode;
+  history?: unknown;
+}) => {
   return (
     <RouterProvider
       router={
         {
-          history: {
-            block: 'mockHistoryBlock',
-            go: 'mockHistoryGo',
-            goBack: 'mockHistoryBack',
-            goForward: 'mockHistoryForward',
-            push: 'mockHistoryPush',
-            replace: 'mockHistoryReplace',
-          },
+          history,
         } as unknown as RouterContextProps
       }
     >
@@ -48,4 +56,33 @@ describe('useNavigation()', () => {
       replace: 'mockHistoryReplace',
     });
   });
+
+  it('should return memoized function', () => {
+    const { result, rerender } = renderHook(() => useNavigation(), {
+      wrapper: ContextWrapper,
+    });
+
+    const firstResult = result.current;
+
+    rerender();
+
+    expect(firstResult).toEqual(result.current);
+  });
+
+  it('should mutate navigation if history object changes', () => {
+    const { result, rerender } = renderHook(() => useNavigation(), {
+      wrapper: ContextWrapper,
+    });
+
+    const firstResult = result.current;
+
+    rerender({
+      history: {
+        ...defaultMockHistory,
+        block: 'foo',
+      },
+    });
+
+    expect(firstResult).not.toEqual(result.current);
+  });
 });
diff --git a/src/hooks/useNavigation.ts b/src/hooks/useNavigation.ts
@@ -1,5 +1,5 @@
 import type { History } from 'history';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { isRouterContext, RouterContext } from '../context/RouterContext';
 import type { RouterContextProps, State } from '../types';
 
@@ -23,5 +23,8 @@ export const useNavigation = <S extends State = State>(): UseNavigation<S> => {
 
   const { goBack, block, goForward, go, push, replace } = context.history;
 
-  return { back: goBack, block, forward: goForward, go, push, replace };
+  return useMemo(
+    () => ({ back: goBack, block, forward: goForward, go, push, replace }),
+    [goBack, block, goForward, go, push, replace]
+  );
 };