Using the callback Hook
In this section, we will learn about the callback Hook and where it is useful. We will then use the Hook in the PersonScore component we have been working on.
Understanding the callback Hook
The callback Hook memoizes a function so that it isn’t recreated on each render. The Hook is called useCallback and the syntax is as follows:
const memoizedCallback = useCallback(() => someFunction(), []);
A function that executes the function to memoize is passed into useCallback as the first argument. The second argument passed to useCallback is an array of dependencies. So, if the someFunction function has dependencies a and b, the call will be as follows:
const memoizedCallback = useCallback( () => someFunction(a, b), [a, b] );
When any dependencies change, the function in the first argument is executed again to return a new function to memoize. In the previous example, a new version of memoizedCallback is created...