如何记忆自定义 React 钩子

Question

const useSomeHook = ({number}) => {
  const [newNumber, setNewNumber] = useState(0)

  useEffect(() => {
    setNewNumber(number + 1)
  }, [number])
}

const SomeComponent = ({number, value, ...restProps}) => {

  useSomeHook({number})


  return <div>{number}</div>
}

Let's imagine I have this case. Each time when in SomeComponent come some new prop, it will call my useSomeHook hook, but I want to prevent it. I want to call it only when the number is changed ( memoize it). In other cases, don't touch it. But I haven't found any solving with this case. Could you help me solve this issue?

Answer 1

You can not prevent calling hook, this will lead to invariant violation error. Every hook in component should be executed on each render. You should rely on useEffect dependencies argument to run conditional code only if value changes.

Answer 2

I think you are looking for useMemo :

function SomeComponent({number}) {
    const expensiveValue = useMemo(() => {
         return doSomeExpensiveCalcolationWith(number)
    }, [number])
    return <div>{expensiveValue}</div>
}

In this case, expensiveValue will be recalculated only when number changes, otherwise its value will stay the same across multiple renders.