React Usecallback Hook Complete Guide

Understanding the Need for useCallback

Consider a scenario where you have a parent component that renders multiple Child components. If the parent component's state changes, it will re-render all child components even if the props passed to some of them didn't change.

Now, let's say you pass a function from the parent to the child as a prop. Even if no data that this function uses changes, because the function itself is a new object every time, the child component will assume something has changed and might re-render unnecessarily.

Here's an example without useCallback:

import React, { useState } from 'react';

const Child = ({ callback }) => {
  console.log('Child Component Rendered');
  return (
    <button onClick={callback}>Child Button</button>
  );
};

const Parent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  const handleChangeText = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <p>Parent Count: {count}</p>
      <input 
        type="text"
        value={text}
        onChange={handleChangeText}
        placeholder="Type something..."
      />
      <Child callback={handleIncrement} />
    </div>
  );
};

export default Parent;

Every keystroke in the input field will cause handleChangeText to be recreated, in turn causing Parent to re-render. Due to this, Child also gets re-rendered, even though its behavior (handleIncrement) doesn't depend on text.

Fixing with useCallback

The useCallback hook can be used to memoize handleIncrement, so that it won't be recreated unless its dependencies change. Here's how you can refactor the code:

import React, { useState, useCallback } from 'react';

const Child = React.memo(({ callback }) => {
  console.log('Child Component Rendered');
  return (
    <button onClick={callback}>Child Button</button>
  );
});

const Parent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // Using useCallback with handleIncrement
  const handleIncrement = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [setCount]); // dependency list includes setCount

  // handleChangeText does not need memoization as it directly reacts to text changes
  const handleChangeText = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <p>Parent Count: {count}</p>
      <input 
        type="text"
        value={text}
        onChange={handleChangeText}
        placeholder="Type something..."
      />
      <Child callback={handleIncrement} />
    </div>
  );
};

export default Parent;

Explanation:

1. Import useCallback: First, we import useCallback from React.
2. Apply useCallback: We wrap handleIncrement in a useCallback call, which creates a stable identity for the function (i.e., it won't change on every render unless its dependencies change).
3. Dependencies: The second argument of useCallback is an array of dependencies ([setCount]). Here, setCount will always be the same function, so handleIncrement will not re-render unnecessarily.
4. Memoize Child Component: To prevent the Child component from re-rendering whenever any props or state in the Parent changes but not the callback, we use React.memo. It’s a higher-order component that helps prevent re-rendering of the same components with the same props over and over again.

Result:

• Only when the count changes, handleIncrement will be recreated.
• Changing the text will no longer cause the Child component to re-render, because the callback prop remains stable.

Full Step-by-Step Example

Let's create a simple application that demonstrates these principles.

File Structure:

src/
|-- App.js
|-- ChildComponent.js
|-- ParentComponent.js

ChildComponent.js

import React from 'react';

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log('[ChildComponent] rendered');

  return (
    <button onClick={onIncrement}>
      Increment Count
    </button>
  );
});

export default ChildComponent;

ParentComponent.js

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the callback function
  const incrementCount = useCallback(() => {
    setCount(count + 1);
    console.log('Count incremented');
  }, [count, setCount]);

  console.log('[ParentComponent] rendered');

  return (
    <div>
      <h1>Parent Count: {count}</h1>
      <ChildComponent onIncrement={incrementCount} />
    </div>
  );
};

export default ParentComponent;

App.js

import React from 'react';
import ParentComponent from './ParentComponent';

function App() {
  console.log('[App] rendered');

  return (
    <div className="App">
      <h1>React useCallback Hook Example</h1>
      <ParentComponent />
    </div>
  );
}

export default App;

How It Works:

1. ParentComponent: This component keeps track of count and provides an incrementCount function via useCallback.
2. Dependencies: [count, setCount] specifies that incrementCount should be regenerated only if count or setCount changes. However, since setCount itself is immutable and count will trigger a re-render, you could just keep it as [count] or even an empty array ([]) here since useCallback will already memoize based on count.
3. ChildComponent: The child component receives incrementCount as a prop. Since incrementCount does not change unless count changes, the ChildComponent does not re-render unnecessarily.
4. Console Logs: Open the browser console to observe when App, ParentComponent, and ChildComponent are rendered. Notice how entering text into an input doesn't cause the ChildComponent to re-render.

Additional Use Cases

Sometimes, you might need a memoized function within another memoized function or when handling complex updates involving multiple states. Here’s an expanded version where another state (name) affects a different part of the UI.

File Structure:

src/
|-- App.js
|-- ChildComponent.js
|-- ParentComponent.js

ChildComponent.js (unchanged)

import React from 'react';

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log('[ChildComponent] rendered');

  return (
    <button onClick={onIncrement}>
      Increment Count
    </button>
  );
});

export default ChildComponent;

ParentComponent.js

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  const incrementCount = useCallback(() => {
    setCount(prevCount => prevCount + 1);
    console.log('Count incremented');
  }, [setCount]);

  const greetUser = useCallback(() => {
    alert(`Hello, ${name}`);
  }, [name]);

  console.log('[ParentComponent] rendered');

  return (
    <div>
      <h1>Parent Count: {count}</h1>
      <input 
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Enter your name..." 
      />
      <button onClick={greetUser}>
        Greet
      </button>
      <ChildComponent onIncrement={incrementCount} />
    </div>
  );
};

export default ParentComponent;

App.js (unchanged)