Home   reactjs  

why we need useCallback in React

In React, useCallback is a hook that returns a memoized version of a callback function. It helps to optimize performance by ensuring that the same function instance is used between renders unless one of its dependencies changes. This can prevent unnecessary re-renders of child components and avoid unnecessary re-creations of functions, which can be particularly beneficial in performance-sensitive applications.

Reasons to Use useCallback

  1. Prevent Unnecessary Re-renders:

    • When a parent component re-renders, it creates new instances of all its functions. If these functions are passed as props to child components, the child components will re-render even if their props haven't changed.
    • useCallback ensures that the function reference remains the same between renders unless dependencies change, preventing unnecessary re-renders of child components.
  2. Optimize Performance:

    • Reducing the number of function re-creations can save memory and improve performance, especially in components that rely on these functions for expensive operations or complex logic.
  3. Stabilize Function References:

    • In contexts where stable function references are required, such as dependencies for other hooks (e.g., useEffect), useCallback ensures that the dependencies do not change unless necessary.

Example Without useCallback

Consider a scenario where a parent component passes a callback to a child component:

import React, { useState } from 'react';

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click me</button>;
});

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

export default ParentComponent;

In this example, every time ParentComponent re-renders, a new handleClick function is created, causing ChildComponent to re-render even though its props haven't changed.

Example With useCallback

Now, let's optimize the example using useCallback:

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

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click me</button>;
});

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

export default ParentComponent;

Explanation

  1. Memoized Function:

    • handleClick is now memoized using useCallback, meaning that it will only be recreated if the count changes.
    • This ensures that the onClick prop passed to ChildComponent remains the same unless count changes, preventing unnecessary re-renders of ChildComponent.
  2. Dependencies:

    • The dependencies array [count] ensures that handleClick is only recreated when count changes, keeping the function reference stable across renders.

When to Use useCallback

Published on: Jul 05, 2024, 06:01 AM  
 

Comments

Add your comment