Why useCallback hook in React? - Purpose & Use Cases

The Big Idea

What if your React app could skip all the extra work and run faster with just one simple hook?

The Scenario

Imagine you have a React app where you pass functions as props to child components. Every time the parent re-renders, you recreate those functions manually, causing the children to re-render too, even if nothing changed.

The Problem

Manually recreating functions on every render makes your app slower and can cause unnecessary updates. It's like rewriting the same letter over and over when you only needed to send it once.

The Solution

The useCallback hook lets you keep the same function instance between renders unless its dependencies change. This stops needless re-renders and speeds up your app.

Before vs After

✗ Before

const handleClick = () => { console.log('clicked'); }

✓ After

const handleClick = React.useCallback(() => { console.log('clicked'); }, [])

What It Enables

You can optimize your React components to update only when truly necessary, making your app faster and smoother.

Real Life Example

Think of a button inside a list that only needs to re-render when its action changes, not every time the whole list updates.

Key Takeaways

Manually recreating functions causes extra work and slowdowns.

useCallback keeps functions stable between renders.

This improves performance by preventing unnecessary updates.