useCallback

React's useCallback hook is a key tool in the optimisation of React applications, ensuring that functions maintain their identity across renders unless their dependencies change.

This technique is particularly useful in complex component trees, helping to improve performance by avoiding unnecessary re-renders.

What is useCallback?

Imagine a craftsman creating a key just once and then using it for all doors until the lock's design changes.

This illustrates the principle of useCallback in React. It enables you to maintain a function's identity across renders, which helps avoid unnecessary re-renders of child components that use that function as a prop.

How Does useCallback Work?

• Function Preservation: useCallback takes a function and an array of dependencies as its arguments. It memoises (or preserves) the function so that it can be reused until one of the dependencies changes.
• Dependency Array: This array determines when the function should be recreated. Unless the values in this array change, the function identity is preserved across renders.

When to Use useCallback

useCallback should be used with discernment, as its inappropriate use can lead to complexity and even degrade performance. Here are some scenarios where useCallback shines:

• Event Handlers in Memoised Components: If you pass an event handler to a component that is wrapped in React.memo, using useCallback ensures that the handler doesn’t cause unnecessary re-renders.
• Dependencies of Other Hooks: When a function is a dependency of effects (useEffect), memoisation (useMemo), or other useCallback hooks, keeping its identity stable can prevent cascading re-renders.

Example Usage of useCallback

Consider a component that renders a list of items. Each item has a "Delete" button which, when clicked, removes the item from the list:

In this scenario, useCallback ensures that handleDelete function is not recreated unless items changes, thereby preventing unnecessary re-renders of ItemComponent.

useCallback vs useMemo

useCallback and useMemo are both tools in React to help your app run faster, but they're used for different things:

• useCallback keeps a function from being recreated every time your component re-renders. Imagine telling React, "Keep using the same function as before unless something important changes." It's handy when you pass functions to components that don't change often.
• useMemo is like saving the answer to a complex math problem so you don't have to solve it again unless the numbers change. It remembers a value, so you don't have to recalculate it every time your component updates, saving time for calculations that take a lot of effort.

So, useCallback is all about saving functions, and useMemo is about saving values. Both help make your app more efficient by avoiding unnecessary work.

Best Practices and Pitfalls

• Avoid Premature Optimiation: Use useCallback only when you have identified a performance bottleneck that it can solve.
• Correct Dependency Array: Make sure to include all variables and props that the callback depends on to avoid issues with stale closures.
• Understand Costs and Benefits: Remember that there is a computational cost to maintaining the function instance. Assess whether the performance gain justifies this cost.