The useCallback() hook

Welcome to my React hooks series where I go over what I am learning about React hooks. In this article, I want to share what I have learnt about the useCallback() hook, which is used for optimizing your application.

What is the useCallback() hook?

The useCallback() hook is a built-in performance optimization function used for optimizing functions (i.e functions declared inside a component), to ensure that they only run when certain data changes. Why is this necessary?, because each time a component re-renders, a new instance of that component is created, that means all the code and function declarations inside the component will be executed again, which means our functions get re-declared over and over again!. This might not sound like a huge problem if the application is not large, but most of the time, the apps we build grow from something small to something large, and as the size of the application keeps increasing, the speed of the application will be deeply affected if this problem is not handled properly. This is why the useCallback() hook was designed to solve this sort of problem, and stop functions from having to re-declare themselves when our component re-renders, when no data in the function changed. Here is an example

// Testing here remain no matter no many times the components re-render
function App() {
    const testing = useCallback((parameter) => {
        get("/item/" + itemId + "/url");
    },
    [data1, data2, etc]);
}

export default App;

The useCallback() hook receives a function which is cached, and a dependencies array that determines whether the function should be re-declared or not. These dependencies are the data the function depends on (If you know useEffect(), this should be familiar), when these dependencies change, the useCallback() hook is informed, and it re-declares the function when the component re-renders. The useCallback() hook doesn't just cache the result of a function call, it caches the entire function definition (The hook that caches only the result of a function call is useMemo() which I will talk about in another article). Remember that each time a function is created, you are creating a unique function object, so the useCallback() hook preserves a function declaration when a component initially renders so that on multiple re-renders of the application, the function declaration remains the same, this is important because if the function declaration keeps changing across re-renders, there is no how we would be able to optimize it.

const cachedFn = useCallback(fn, dependencies);

Conclusion

As they say, with great power comes great responsibility, you can look at this, and might want to start using the useCallback() hook everywhere, but that's just a recipe for more disaster. My advice is that look at your component to see which function definition might be slowing down your application everytime the component re-renders, and first check if there is a better way to optimize it before turning to useCallback() for help. (You can read more about when it's best to use this hook from react's documentation).