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.