useCallback optimization in React Native - Deep Dive

Overview - useCallback optimization

What is it?

useCallback is a React hook that helps you remember a function between renders. It returns a memoized version of the function that only changes if its dependencies change. This helps avoid unnecessary work and keeps your app fast. In React Native, it is used to optimize performance by preventing needless re-creation of functions.

Why it matters

Without useCallback, functions are recreated on every render, which can cause child components to re-render unnecessarily. This slows down the app and wastes battery and CPU. Using useCallback helps keep the app smooth and responsive, especially on mobile devices with limited resources.

Where it fits

Before learning useCallback, you should understand React components, props, state, and how rendering works. After mastering useCallback, you can learn about other React performance hooks like useMemo and React.memo for deeper optimization.

Mental Model

Core Idea

useCallback remembers a function so React can skip recreating it unless its inputs change.

Think of it like...

It's like writing a recipe on a sticky note and only rewriting it if you change the ingredients, instead of rewriting it every time you want to cook.

Component Render Flow
┌─────────────────────┐
│ Component Renders    │
│ ┌───────────────┐   │
│ │ useCallback   │───┼──> Returns same function if deps unchanged
│ └───────────────┘   │
│ Function passed to  │
│ child components    │
└─────────────────────┘

Build-Up - 6 Steps

1

Foundation

What is useCallback Hook

Concept: Introducing useCallback as a way to memoize functions in React.

In React Native, every time a component renders, all functions inside it are recreated. useCallback is a hook that lets you keep the same function instance between renders unless certain values change. You write: const memoizedFn = useCallback(() => { ... }, [deps]);

Result

The function memoizedFn stays the same between renders if deps don't change.

Understanding that functions are recreated on every render explains why useCallback is needed to keep functions stable.

2

Foundation

Why Functions Recreate Cause Problems

Concept: Explaining how new functions cause child components to re-render.

When you pass a function as a prop to a child, React compares the old and new props. If the function is new (different reference), React thinks props changed and re-renders the child. This can cause slowdowns if children are complex or many.

Result

Child components re-render more often than needed, slowing the app.

Knowing that function identity affects rendering helps you see why memoizing functions matters.

3

Intermediate

Using useCallback with Dependencies

🤔Before reading on: do you think useCallback updates the function every render or only when dependencies change? Commit to your answer.

Concept: useCallback takes dependencies to decide when to update the function.

You pass an array of dependencies to useCallback. The function is recreated only if one of these dependencies changes. For example: useCallback(() => doSomething(count), [count]) recreates the function only when count changes.

Result

Function stays the same across renders unless dependencies change.

Understanding dependencies lets you control when functions update, balancing freshness and performance.

4

Intermediate

Common Patterns for useCallback

🤔Before reading on: do you think useCallback is useful only for event handlers or also for other functions? Commit your guess.

Concept: useCallback is often used for event handlers and functions passed to children.

Typical use cases include onPress handlers, callbacks passed to FlatList, or functions passed to React.memo children. This prevents unnecessary re-renders and improves performance.

Result

App runs smoother with fewer wasted renders.

Knowing where to apply useCallback helps you optimize real app scenarios effectively.

5

Advanced

When useCallback Can Hurt Performance

🤔Before reading on: do you think using useCallback always improves performance? Commit your answer.

Concept: useCallback adds memory and CPU overhead, so overusing it can slow your app.

If dependencies change every render or the function is cheap to create, useCallback adds unnecessary work. Also, if the function is not passed to children or used in dependencies, memoizing it is pointless.

Result

Overusing useCallback can make your app slower, not faster.

Understanding the cost of memoization prevents misuse and performance degradation.

6

Expert

How React Uses Function Identity Internally

🤔Before reading on: do you think React compares functions by content or by reference? Commit your answer.

Concept: React compares functions by their reference (memory address), not by their code.

React uses shallow comparison for props. Functions are objects, so React checks if the reference changed. If you recreate a function, its reference changes, triggering re-render. useCallback keeps the reference stable.

Result

Stable function references prevent unnecessary re-renders.

Knowing React's shallow prop comparison explains why function identity is critical for performance.

Under the Hood

React stores the memoized function reference internally and compares it on each render. If dependencies are unchanged, React returns the stored function reference instead of creating a new one. This stable reference helps React.memo and PureComponent detect unchanged props and skip re-rendering.

Why designed this way?

React's design favors simplicity and speed by using shallow comparison of props. Memoizing functions with useCallback fits this model by keeping references stable. Alternatives like deep comparison would be slower and more complex, so useCallback offers a manual, explicit way to optimize.

Render Cycle
┌───────────────┐
│ Component     │
│ renders       │
│ ┌───────────┐ │
│ │ useCallback│ │
│ └────┬──────┘ │
│      │        │
│      ▼        │
│ Returns memoized function
│      │        │
│      ▼        │
│ Passes function as prop
└──────┴────────┘
React compares old and new function references
┌───────────────┐
│ If same ref   │
│ → skip child  │
│ re-render     │
│ Else          │
│ → re-render   │
└───────────────┘

Myth Busters - 3 Common Misconceptions

Quick: Does useCallback guarantee your app will always run faster? Commit yes or no.

Common Belief: Using useCallback always makes your app faster by preventing re-renders.

Reality: useCallback can add overhead and sometimes slow your app if used unnecessarily or with frequently changing dependencies.

Why it matters: Blindly using useCallback everywhere can waste memory and CPU, making performance worse.

Quick: Do you think React compares functions by their code content? Commit yes or no.

Common Belief: React compares functions by their code to decide if props changed.

Reality: React compares functions by their reference (memory address), not their code content.

Why it matters: Misunderstanding this leads to unnecessary re-renders because new function references always look different.

Quick: Does useCallback memoize the function result or the function itself? Commit your answer.

Common Belief: useCallback caches the result of the function to avoid recalculating it.

Reality: useCallback memoizes the function itself, not its return value. For caching results, useMemo is used.

Why it matters: Confusing useCallback with useMemo can cause bugs and missed optimizations.

Expert Zone

1

useCallback only memoizes the function reference, so if the function closes over changing variables, it may still use stale values unless dependencies are correct.

2

When passing functions to deeply nested components, useCallback combined with React.memo can drastically reduce renders, but improper dependencies can cause subtle bugs.

3

In some cases, inline arrow functions with useCallback can be less readable and harder to debug, so balance optimization with code clarity.

When NOT to use

Avoid useCallback when functions are cheap to create, not passed as props, or dependencies change every render. Instead, write simple functions inline or use useMemo for expensive calculations.

Production Patterns

In production React Native apps, useCallback is commonly used for event handlers like onPress, callbacks passed to FlatList or SectionList, and functions passed to memoized child components to prevent unnecessary re-renders and improve scroll performance.

Connections

useMemo Hook

useCallback is a specialized form of useMemo for functions.

Understanding useCallback helps grasp useMemo since both memoize values but useCallback focuses on functions.

React.memo

useCallback works with React.memo to prevent child re-renders by stabilizing function props.

Knowing how useCallback stabilizes function references clarifies how React.memo decides to skip rendering.

Caching in Computer Science

useCallback is a form of caching function references to avoid repeated work.

Recognizing useCallback as caching connects React optimization to broader computer science principles of efficiency.

Common Pitfalls

#1 Overusing useCallback for every function regardless of cost or usage.

Wrong approach:

const handlePress = useCallback(() => { console.log('Pressed'); }, []); // used everywhere even if not passed as prop

Correct approach:

const handlePress = () => { console.log('Pressed'); }; // simple inline function if not passed down

Root cause:

Misunderstanding that useCallback has overhead and is only beneficial when function identity matters.

#2 Leaving out dependencies or passing empty array incorrectly.

Wrong approach:

const increment = useCallback(() => setCount(count + 1), []); // missing count in deps

Correct approach:

const increment = useCallback(() => setCount(count + 1), [count]); // correct dependencies

Root cause:

Not understanding that dependencies must include all variables used inside the function to keep it updated.

#3 Using useCallback to memoize function results instead of function references.

Wrong approach:

const result = useCallback(() => expensiveCalc(), [input]); // expecting result memoization

Correct approach:

const result = useMemo(() => expensiveCalc(), [input]); // correct for caching results

Root cause:

Confusing useCallback with useMemo and their purposes.

Key Takeaways

useCallback memoizes function references to prevent unnecessary re-creation between renders.

Stable function references help React avoid needless child component re-renders, improving app performance.

Overusing useCallback or incorrect dependencies can hurt performance or cause bugs.

useCallback memoizes the function itself, not its return value; use useMemo for caching results.

Understanding React's shallow prop comparison clarifies why function identity matters for optimization.

Practice

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

easy

A. To create new state variables

B. To prevent functions from being recreated on every render

C. To style components dynamically

D. To fetch data from an API

Solution

1. Step 1: Understand function recreation in React

   Functions inside components are recreated on every render by default, which can cause unnecessary work.

2. Step 2: Role of useCallback

   useCallback memoizes the function, so it keeps the same reference unless dependencies change.

3. Final Answer:

   To prevent functions from being recreated on every render -> Option B

4. Quick Check:

   useCallback = prevent function recreation [OK]

Hint: useCallback keeps functions stable between renders [OK]

Common Mistakes:

• Thinking useCallback creates state
• Confusing useCallback with styling
• Assuming useCallback fetches data

2. Which of the following is the correct syntax to use useCallback?

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: Check useCallback parameters

   useCallback takes a function and an array of dependencies as parameters.

2. Step 2: Validate correct syntax

   const memoizedFn = useCallback(() => { doSomething(); }, [dependency]); correctly passes an arrow function and an array of dependencies.

3. Final Answer:

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

4. Quick Check:

   useCallback syntax = function + [dependencies] [OK]

Hint: useCallback needs a function and dependency array [OK]

Common Mistakes:

• Omitting dependency array
• Passing dependencies without array brackets
• Passing function reference without wrapping in arrow function

3. What will be the output of the following code snippet?

const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(count + 1), []);

increment();
increment();
console.log(count);

medium

A. 2

B. Error

C. 1

D. 0

Solution

1. Step 1: Analyze useCallback dependencies

   The callback uses count but has an empty dependency array, so it captures the initial value 0.

2. Step 2: Effect of calling increment()

   Calling increment() calls setCount(0 + 1) twice, but React batches updates and count remains 0 in this synchronous context.

3. Final Answer:

   0 -> Option D

4. Quick Check:

   Empty dependencies cause stale count = 0 [OK]

Hint: Empty deps cause stale closure values [OK]

Common Mistakes:

• Assuming count updates immediately
• Ignoring stale closure from empty deps
• Expecting increment to add twice

4. Identify the issue in this code and how to fix it:

const [value, setValue] = useState(0);
const updateValue = useCallback(() => {
  setValue(value + 1);
}, []);

medium

A. Missing dependency 'value' in useCallback array; add [value]

B. setValue should be outside useCallback

C. useCallback should not be used here

D. No issue; code is correct

Solution

1. Step 1: Check dependencies in useCallback

   The callback uses value but the dependency array is empty, causing stale closure.

2. Step 2: Fix by adding dependency

   Add value to the dependency array to update the callback when value changes.

3. Final Answer:

   Missing dependency 'value' in useCallback array; add [value] -> Option A

4. Quick Check:

   Dependencies must include all used variables [OK]

Hint: Always include variables used inside useCallback deps [OK]

Common Mistakes:

• Leaving dependency array empty
• Removing useCallback instead of fixing deps
• Misplacing setValue call

5. You have a parent component passing a callback to a child. The callback depends on multiple state variables. How should you optimize it with useCallback to avoid unnecessary re-renders of the child?

hard

A. Wrap the callback with useCallback including all dependent state variables in the dependency array

B. Wrap the callback with useCallback but leave dependency array empty

C. Do not use useCallback; define the callback inline in the child

D. Use useMemo instead of useCallback for the callback

Solution

1. Step 1: Understand callback dependencies

   The callback depends on multiple state variables, so it must update when any of them change.

2. Step 2: Use useCallback with all dependencies

   Include all dependent state variables in the dependency array to keep the callback updated and stable.

3. Step 3: Avoid empty dependency array

   Leaving it empty causes stale values and bugs; defining inline causes new function each render.

4. Final Answer:

   Wrap the callback with useCallback including all dependent state variables in the dependency array -> Option A

5. Quick Check:

   All dependencies in useCallback deps = stable, updated callback [OK]

Hint: Include all used states in useCallback deps to optimize [OK]

Common Mistakes:

• Leaving deps empty causing stale closures
• Defining callback inline causing re-renders
• Confusing useMemo with useCallback