⚛️ useCallback Hook

? Quick Overview

useCallback is a React Hook used to memoize functions. In React Native, it helps prevent unnecessary re-creation of functions on every render, which can improve performance when passing callbacks to child components.

? Key Concepts

Functions are re-created on every render by default
useCallback memoizes a function reference
Useful when passing callbacks to memoized child components
Depends on dependency array similar to useEffect

? Syntax / Theory

? View Code Example

// Basic syntax of useCallback hook
const memoizedCallback = useCallback(() => {
  doSomething();
}, [dependency]);

? Code Example(s)

? View Code Example

// Prevents function recreation on every render
import React, { useState, useCallback } from "react";
import { View, Text, Button } from "react-native";

export default function App() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
}

? Live Output / Explanation

The increment function is memoized and will not be recreated on every render. This is useful when passing it to child components wrapped with React.memo.

? Interactive Example (Simulator)

Use the simulator below to understand how useCallback prevents child components from re-rendering when the parent updates unrelated state.

Re-render Simulator

Enable useCallback

Parent Component

Parent State (Unrelated): 0

Function Reference: Stable

Memoized Child Component

Receives: handleClick prop

Re-renders

With useCallback, updating the Parent does NOT trigger a Child render.

? Use Cases

Passing callbacks to memoized child components
Optimizing FlatList item render callbacks
Reducing unnecessary re-renders in large component trees

? Tips & Best Practices

Use useCallback only when needed
Combine with React.memo for best results
Avoid empty dependency arrays unless safe

? Try It Yourself

Create a child component wrapped with React.memo
Pass a normal function as a prop and observe re-renders
Replace it with useCallback and compare behavior