useCallback

useCallback 👁

Notes:

• useCallback returns a memoized callback.
• Call signature: const memoizedCallback = useCallback(function, arrayDependency)
• View the docs.

Starter Example

The following example will form the basis of the explanations and code snippets that follow.

In the example above, the parent component, <Age /> is updated (and re-rendered) whenever the "Get older" button is clicked. Consequently, the <Instructions /> child component is also re-rendered because the doSomething prop is passed a new callback, with a new reference. This can be seen from the random text colour which changes whenever the state value age is updated.

NB: Even though the Instructions child component uses React.memo to optimize performance, it is still re-rendered.

How can this be fixed? i.e prevent <Instructions /> from re-rendering needlessly?

useCallback with referenced function

useCallback with inline function

useCallback works with an inline function as well. Here's the same solution with a inline useCallback call.