useCallback hook in React - Step-by-Step Execution

Concept Flow - useCallback hook

Component renders

↓

useCallback creates memoized function

↓

Function passed to child or used

↓

State or props change?

No→Return memoized function

Yes↓

Dependencies changed?

No→Return memoized function

Yes↓

Create new function instance

↓

Component re-renders with new function

When a component renders, useCallback returns a memoized function that only changes if its dependencies change, avoiding unnecessary re-creations.

Execution Sample

React

const memoizedCallback = useCallback(() => {
  console.log(count);
}, [count]);

This code creates a function that logs 'count' and only changes when 'count' changes.

Execution Table

Step	Render Count	Dependencies [count]	Action	Function Instance Changed?	Output
1	1	0	Initial render, create function	Yes	Function created, logs 0 when called
2	2	0	Re-render, dependencies same	No	Same function instance reused
3	3	1	Re-render, dependencies changed	Yes	New function created, logs 1 when called
4	4	1	Re-render, dependencies same	No	Same function instance reused
5	5	2	Re-render, dependencies changed	Yes	New function created, logs 2 when called
6	6	2	Re-render, dependencies same	No	Same function instance reused
7	7	2	No re-render, no action	No	Function unchanged

💡 Component stops re-rendering or dependencies stop changing, so function instance remains stable.

Variable Tracker

Variable	Start	After Render 1	After Render 2	After Render 3	After Render 4	After Render 5	After Render 6	Final
count	0	0	0	1	1	2	2	2
memoizedCallback	undefined	func#1	func#1	func#2	func#2	func#3	func#3	func#3

Key Moments - 3 Insights

Why does the function instance not change on every render?

Because useCallback returns the same function instance if dependencies haven't changed, as shown in rows 2, 4, and 6 where 'Function Instance Changed?' is 'No'.

What triggers useCallback to create a new function?

When a dependency like 'count' changes value, useCallback creates a new function instance, as seen in rows 3, 5 where dependencies changed.

Does useCallback prevent component re-renders?

No, useCallback only memoizes the function instance; component re-renders depend on state or props changes, not shown directly here.

Visual Quiz - 3 Questions

Look at the execution table, at which render does the function instance first change?

A Render 2

B Render 3

C Render 1

D Render 4

💡 Hint

Check the 'Function Instance Changed?' column for the first 'Yes' value.

At which render does the dependency 'count' change from 0 to 1?

A Render 2

B Render 3

C Render 4

D Render 5

💡 Hint

Look at the 'Dependencies [count]' column for the change from 0 to 1.

If the dependency array was empty, how would the function instance behave across renders?

A It would never change after initial render

B It would change only on odd renders

C It would change every render

D It would change only when count changes

💡 Hint

An empty dependency array means the function is created once and never recreated.

Concept Snapshot

useCallback(() => { /* function */ }, [deps])
- Returns memoized function
- Function changes only if dependencies change
- Helps avoid unnecessary function re-creations
- Useful when passing functions to child components
- Does not prevent component re-renders

Full Transcript

The useCallback hook in React returns a memoized function that only changes if its dependencies change. On the first render, it creates a new function. On subsequent renders, if dependencies are unchanged, it returns the same function instance. When dependencies change, it creates a new function instance. This helps optimize performance by preventing unnecessary function recreations, especially when passing functions to child components. However, useCallback does not stop the component from re-rendering; it only stabilizes the function reference.

Practice

1. What is the main purpose of the useCallback hook in React?

easy

A. To memoize a function so it doesn't get recreated on every render unless dependencies change

B. To store a value that persists between renders

C. To fetch data from an API asynchronously

D. To create a new state variable

Solution

1. Step 1: Understand what useCallback does

   useCallback returns a memoized version of a function that only changes if its dependencies change.

2. Step 2: Compare options with this behavior

   Only To memoize a function so it doesn't get recreated on every render unless dependencies change describes memoizing a function to avoid recreating it unnecessarily.

3. Final Answer:

   To memoize a function so it doesn't get recreated on every render unless dependencies change -> Option A

4. Quick Check:

   useCallback = memoize function [OK]

Hint: Remember: useCallback memoizes functions to keep them stable [OK]

Common Mistakes:

• Confusing useCallback with useState
• Thinking useCallback stores values instead of functions
• Assuming useCallback fetches data

2. Which of the following is the correct syntax to use useCallback in a React functional component?

easy

A. const memoizedFn = useCallback(doSomething(), [dependency]);

B. const memoizedFn = useCallback(() => { doSomething(); });

C. const memoizedFn = useCallback(() => { doSomething(); }, [dependency]);

D. const memoizedFn = useCallback(doSomething, dependency);

Solution

1. Step 1: Recall the correct useCallback signature

   The hook takes a function and an array of dependencies: useCallback(fn, [deps]).

2. Step 2: Analyze each option

   const memoizedFn = useCallback(() => { doSomething(); }, [dependency]); correctly passes an inline function and dependencies array. const memoizedFn = useCallback(() => { doSomething(); }); misses dependencies array. const memoizedFn = useCallback(doSomething(), [dependency]); calls doSomething() immediately, passing its return value instead of the function. const memoizedFn = useCallback(doSomething, dependency); passes dependency without array brackets, invalid.

3. Final Answer:

   const memoizedFn = useCallback(() => { doSomething(); }, [dependency]); -> Option C

4. Quick Check:

   useCallback(fn, [deps]) [OK]

Hint: useCallback needs a function and an array of dependencies [OK]

Common Mistakes:

• Omitting the dependencies array
• Passing dependencies without array brackets
• Passing function call instead of function reference

3. Consider this React component code:

const MyComponent = () => {
  const [count, setCount] = React.useState(0);
  const increment = React.useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return <button onClick={increment}>Increment</button>;
};

What happens when the button is clicked multiple times quickly?

medium

A. The count increments correctly each time

B. The code throws an error because of missing dependencies

C. The count increments only once and then stops

D. The count increments but may lag behind due to stale closure

Solution

1. Step 1: Understand the closure inside useCallback

   The increment function uses count from its dependencies. Because count is in the dependency array, the function updates when count changes, but rapid clicks may use a stale value.

2. Step 2: Analyze behavior on quick clicks

   Rapid clicks may cause the function to use an outdated count value due to closure, causing increments to lag behind actual clicks.

3. Final Answer:

   The count increments but may lag behind due to stale closure -> Option D

4. Quick Check:

   useCallback with state dependency can cause stale closures [OK]

Hint: State in useCallback can be stale if updated rapidly [OK]

Common Mistakes:

• Assuming count always updates instantly
• Ignoring closure behavior in hooks
• Thinking useCallback prevents all stale data issues

4. Identify the bug in this code using useCallback:

const MyComponent = () => {
  const [value, setValue] = React.useState(0);
  const handleClick = React.useCallback(() => {
    setValue(value + 1);
  }, []);
  return <button onClick={handleClick}>Click</button>;
};

medium

A. Missing dependency value in the dependency array causes stale state updates

B. Using useCallback without dependencies causes infinite re-renders

C. setValue should not be called inside useCallback

D. The function should not be memoized with useCallback

Solution

1. Step 1: Check the dependency array of useCallback

   The callback uses value but the dependency array is empty, so the function never updates with new value.

2. Step 2: Understand the effect of missing dependencies

   Because value is missing, the callback uses the initial value forever, causing stale increments.

3. Final Answer:

   Missing dependency value in the dependency array causes stale state updates -> Option A

4. Quick Check:

   Dependencies must include all used variables [OK]

Hint: Always include all variables used inside useCallback in dependencies [OK]

Common Mistakes:

• Leaving dependency array empty when variables are used
• Thinking setState functions need dependencies
• Confusing useCallback with useMemo

5. You want to optimize a child component that receives a callback prop to avoid unnecessary re-renders. Which approach correctly uses useCallback to achieve this?

const Parent = () => {
  const [count, setCount] = React.useState(0);

  // Which is correct?
  const handleClick = ???

  return <Child onClick={handleClick} />;
};

hard

A. const handleClick = React.useCallback(() => setCount(count + 1), [count]);

B. const handleClick = React.useCallback(() => setCount(c => c + 1), []);

C. const handleClick = () => setCount(count + 1);

D. const handleClick = React.useCallback(() => setCount(count + 1));

Solution

1. Step 1: Understand the goal to avoid unnecessary re-renders

   We want handleClick to be stable and not change unless needed, so the child doesn't re-render unnecessarily.

2. Step 2: Analyze each option's dependency array and function

   const handleClick = React.useCallback(() => setCount(count + 1), [count]); depends on count, so it changes every time count changes, causing re-renders. const handleClick = React.useCallback(() => setCount(c => c + 1), []); uses functional update c => c + 1 and empty dependencies, so handleClick is stable. const handleClick = () => setCount(count + 1); recreates function every render. const handleClick = React.useCallback(() => setCount(count + 1)); misses dependencies array, which is invalid.

3. Final Answer:

   const handleClick = React.useCallback(() => setCount(c => c + 1), []); -> Option B

4. Quick Check:

   Stable callback with functional update and empty deps = const handleClick = React.useCallback(() => setCount(c => c + 1), []); [OK]

Hint: Use functional updates with empty deps to keep callback stable [OK]

Common Mistakes:

• Including state in dependencies causing new functions each render
• Not using functional updates when deps are empty
• Omitting dependency array causing bugs