useSteps(): only update setStep when needed

src/components/Preferences/LocalIdentities.js

@@ -30,6 +30,9 @@ const LocalIdentities = ({
   onModify,
   onModifyEvent,
 }) => {
+  const { identityEvents$ } = React.useContext(IdentityContext)
+  const { showLocalIdentityModal } = React.useContext(LocalIdentityModalContext)
+
   // transform localIdentities from object into array and attach address to each entry
   const identities = Object.entries(localIdentities).map(
     ([address, identity]) => ({
@@ -42,8 +45,6 @@ const LocalIdentities = ({
     return <EmptyLocalIdentities onImport={onImport} />
   }
 
-  const { identityEvents$ } = React.useContext(IdentityContext)
-  const { showLocalIdentityModal } = React.useContext(LocalIdentityModalContext)
   const updateLabel = address => async () => {
     try {
       await showLocalIdentityModal(address)

src/hooks.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useReducer, useState } from 'react'
 import keycodes from './keycodes'
 import { log, removeStartingSlash } from './utils'
 
@@ -41,32 +41,57 @@ export function useArrows({ onUp, onLeft, onDown, onRight } = {}) {
   }, [onUp, onLeft, onDown, onRight])
 }
 
+function stepsReducer(state, { type, value, steps }) {
+  const { step } = state
+
+  let newStep = null
+
+  if (type === 'set') {
+    newStep = value
+  }
+  if (type === 'next' && step < steps - 1) {
+    newStep = step + 1
+  }
+  if (type === 'prev' && step > 0) {
+    newStep = step - 1
+  }
+
+  if (newStep !== null && step !== newStep) {
+    return {
+      step: newStep,
+      direction: newStep > step ? 1 : -1,
+    }
+  }
+
+  return state
+}
+
 // Simple hook to manage a given number of steps.
 export function useSteps(steps) {
-  const [step, _setStep] = useState(0)
-  const [direction, setDirection] = useState(0)
+  const [{ step, direction }, updateStep] = useReducer(stepsReducer, {
+    step: 0,
+    direction: 0,
+  })
+
+  // If the number of steps change, we reset the current step
+  useEffect(() => {
+    updateStep({ type: 'set', value: 0, steps })
+  }, [steps])
 
   const setStep = useCallback(
-    newStep => {
-      if (step !== newStep) {
-        setDirection(newStep > step ? 1 : -1)
-        _setStep(newStep)
-      }
+    value => {
+      updateStep({ type: 'set', value, steps })
     },
-    [setDirection, _setStep, step]
+    [steps]
   )
 
   const next = useCallback(() => {
-    if (step < steps - 1) {
-      setStep(step + 1)
-    }
-  }, [setStep, step, steps])
+    updateStep({ type: 'next', steps })
+  }, [steps])
 
   const prev = useCallback(() => {
-    if (step > 0) {
-      setStep(step - 1)
-    }
-  }, [setStep, step])
+    updateStep({ type: 'prev', steps })
+  }, [steps])
 
   return {
     direction,