Understanding useCallback in React

Ever noticed your component re-rendering even when nothing seems to change? One common reason is function recreation on every render. That’s where useCallback comes in.

What is useCallback?

It’s a React hook that memoizes a function, ensuring it keeps the same reference unless its dependencies change. This helps prevent unnecessary re-renders, especially when passing functions as props.

When should you use useCallback?

✅ When passing functions to memoized components (React.memo), preventing unwanted re-renders. ✅ When a function is used inside useEffect and needs a stable reference. ✅ In performance-sensitive situations where function recreation causes noticeable slowdowns.

⚠️ When should you not use useCallback?

If the function is defined inside the same component and isn't causing re-renders, you probably don’t need it. Overusing it can add unnecessary complexity without real benefits.

Example

Since handleClick is wrapped in useCallback, its reference remains the same across renders, preventing the Button component from re-rendering unnecessarily.

Final Thoughts

useCallback is a great tool, but it’s not a silver bullet. Use it when function recreation actually affects performance, but don’t overdo it just for the sake of optimization.

Have you run into unnecessary re-renders before? Let’s talk in the comments!