Question 1

Why does a component re-render even if the function logic inside its props hasn't changed?

Accepted Answer

This happens because of "referential equality." In JavaScript, functions are objects, and every time a parent component re-renders, it creates a brand-new function object in memory. Even if the code inside the function is identical, it has a new memory address. When a child component wrapped in `React.memo` performs a shallow comparison of its props, it sees a new reference (a "new ID card") and triggers a re-render because it assumes the prop has changed.

Question 2

How does `useCallback` prevent unnecessary re-renders?

Accepted Answer

The `useCallback` hook acts as a cache for a function's identity. When you wrap a handler in `useCallback`, React stores that specific function object in an internal "storage locker." On subsequent renders, React checks the dependency array; if the dependencies haven't changed, React tosses away the newly created function and returns the original reference from the previous render. This stable reference allows `React.memo` to see that the prop is identical, thus skipping the expensive re-render of the child component.

Question 3

What is a "stale closure" in the context of `useCallback`?

Accepted Answer

A stale closure occurs when a memoized function "closes over" variables from a past render and loses access to current data. If you provide an empty dependency array `[]` to `useCallback`, React will always return the version of the function created during the initial render. If that function relies on a piece of state like `volume`, it will be "trapped in a time capsule," forever using the initial volume value even if the user has since updated it. This is why accurately filling the dependency array is a vital "contract" with React.

Question 4

Can `useCallback` be used inside a loop or a `map` function?

Accepted Answer

No, calling `useCallback` inside a loop violates the "Rules of Hooks." To handle lists efficiently, you should create a single stable handler in the parent component that accepts an identifier (like an ID) as an argument. You then pass this same stable function reference to every item in the list. Each child component calls that shared handler with its specific data, ensuring that all items in the list share one stable function identity rather than creating fifty unique, unstable functions.

Question 5

Why might a component still re-render after applying `useCallback` to a function prop?

Accepted Answer

There are two common reasons for this. First, the child component itself might not be wrapped in `React.memo`; without `memo`, a child always re-renders when its parent does, regardless of prop stability. Second, there may be other "silent killers" like inline object literals or arrays (e.g., `style={{ marginTop: 10 }}`) being passed as props. Just like functions, these objects create new references on every render, which fails the shallow comparison check in `React.memo`.

Mastering useCallback: Solving the Mystery of Wasted Renders

How This Personalized Podcast Was Made

More like this