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.