useCallback
useCallback is a hook that is used to cache a function between re-renders and will always return a function. On the initial render, it returns a function with the initial values. useCallback like useEffect has a dependency array that makes sure that when the variables in the dependency array are changed the callback function gets updated with new values of those variables.
We have to remember that we should not overuse useCallback i.e. we should not wrap every function being used in a component with useCallback. If your application changes pages or does some minimal non-expensive performance in functions then don’t wrap it with useCallback, useCallback if necessary where there are more interactions.
Usage of useCallback:
const handleSubmit = useCallback(() =>{
doSomething(a,b); //function that needs to be cached/ memoized
},[a , b]);// dependency array, if these change function is memoized again- Read more about useCallback here.
- Must-read about useCallback