Maintain same number of hooks between renders

Author: chrisflatley

theme/src/components/PreviousNext.tsx

@@ -1,8 +1,8 @@
-import React, { useContext } from 'react'
+import { Button, Divider, Flex, Icons } from '@committed/components'
+import React, { useCallback, useContext } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 import { Info } from '../types'
 import { DocsContext } from './Layout'
-import { useHotkeys } from 'react-hotkeys-hook'
-import { Flex, Button, Divider, Icons } from '@committed/components'
 
 export interface PreviousNextProps {
   previous?: Info
@@ -19,15 +19,22 @@ export const PreviousNext = ({ previous, next }: PreviousNextProps) => {
     justifyContent = 'flex-start'
   }
 
-  if (previous) {
-    useHotkeys('left', () => navigate(previous.url))
-    useHotkeys('shift+left', () => navigate(previous.url))
-  }
+  const navigateToPrevious = useCallback(() => {
+    if (previous) {
+      navigate(previous.url)
+    }
+  }, [previous, navigate])
 
-  if (next) {
-    useHotkeys('right', () => navigate(next.url))
-    useHotkeys('shift+right', () => navigate(next.url))
-  }
+  const navigateToNext = useCallback(() => {
+    if (next) {
+      navigate(next.url)
+    }
+  }, [navigate, next])
+
+  useHotkeys('left', navigateToPrevious, [navigateToPrevious])
+  useHotkeys('shift+left', navigateToPrevious, [navigateToPrevious])
+  useHotkeys('right', navigateToNext, [navigateToNext])
+  useHotkeys('shift+right', navigateToNext, [navigateToNext])
 
   return (
     <>

theme/src/components/Tree.tsx

@@ -1,11 +1,11 @@
-import React, { useContext } from 'react'
-import { Item } from '../types'
-import TreeNode from './TreeNode'
-import { DocsContext } from './Layout'
+import { List } from '@committed/components'
 import { withPrefix } from 'gatsby'
-import { firstUrl, firstInfo } from '../util/tree'
+import React, { useCallback, useContext } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { List } from '@committed/components'
+import { Item } from '../types'
+import { firstInfo, firstUrl } from '../util/tree'
+import { DocsContext } from './Layout'
+import TreeNode from './TreeNode'
 
 export interface TreeProps {
   location: any
@@ -42,23 +42,28 @@ export const Tree = ({
 
   const index = data.items.findIndex(item => isParent(item))
 
-  if (index == -1) {
-    useHotkeys('shift+down', () => navigateItem(0))
-  } else {
-    if (index == 0) {
-      useHotkeys('shift+up', () => navigate('/'))
+  const navigateDown = useCallback(() => {
+    if (index === -1) {
+      navigateItem(0)
+    } else if (index < data.items.length - 1) {
+      navigateItem(index + 1)
     }
-    if (index > 0) {
+  }, [navigateItem, index, data])
+
+  const navigateUp = useCallback(() => {
+    if (index === 0) {
+      navigate('/')
+    } else if (index > 0) {
       if (isActive(firstInfo(data.items[index]).id)) {
-        useHotkeys('shift+up', () => navigateItem(index - 1))
+        navigateItem(index - 1)
       } else {
-        useHotkeys('shift+up', () => navigateItem(index))
+        navigateItem(index)
       }
     }
-    if (index < data.items.length - 1) {
-      useHotkeys('shift+down', () => navigateItem(index + 1))
-    }
-  }
+  }, [navigateItem, index, data, firstInfo, isActive])
+
+  useHotkeys('shift+down', navigateDown, [navigateDown])
+  useHotkeys('shift+up', navigateUp, [navigateUp])
 
   return (
     <List dense>

theme/src/print/Header.tsx

@@ -1,8 +1,7 @@
+import { Column } from '@committed/components'
+import { graphql, useStaticQuery } from 'gatsby'
 import React from 'react'
-import { useStaticQuery, graphql, navigate } from 'gatsby'
-import { useHotkeys } from 'react-hotkeys-hook'
 import { Classification } from './Classification'
-import { Column } from '@committed/components'
 
 export const Header = () => {
   const {