DEV Community

Cover image for React Basics~Render Performance/ useCallback
Ogasawara Kakeru
Ogasawara Kakeru

Posted on

1

React Basics~Render Performance/ useCallback

  • Even if the memo is set to a child component, the child component can still be re-rendered.

  • It is a case that we pass a function as a props to the child component.

・src/Example.js

import React, { useCallback, useState } from "react";
import Child from "./Child";

const Example = () => {
  console.log("Parent render");

  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);

  const clickHandler = () => {
    setCountB((pre) => pre + 1);
  };

  return (
    <div className="parent">
      <div>
        <h3>Parent component</h3>
        <div>
          <button
            onClick={() => {
              setCountA((pre) => pre + 1);
            }}
          >
            button A
          </button>
          <span>Update parent component</span>
        </div>
      </div>
      <div>
        <p>The count of click button A:{countA}</p>
      </div>
      <Child countB={countB} onClick={clickHandler} />
    </div>
  );
};

export default Example;


Enter fullscreen mode Exit fullscreen mode

・src/Child.js

import { memo } from "react";

const ChildMemo = memo(({ countB, onClick }) => {
  console.log("%cChild render", "color: red;");

  return (
    <div className="child">
      <h2>Child component</h2>
      <div>
        <button onClick={onClick}>button B</button>
        <span>Uodate child component</span>
      </div>
      <span>The count of click button B :{countB}</span>
    </div>
  );
});

export default ChildMemo;


Enter fullscreen mode Exit fullscreen mode
  • The reason the child component is re-rendered is because of the clickHandler function in src/Example.js
  const clickHandler = () => {
    setCountB((pre) => pre + 1);
  };
Enter fullscreen mode Exit fullscreen mode
  • This function is passed to the child component as an onClick props.
 <Child countB={countB} onClick={clickHandler} />
Enter fullscreen mode Exit fullscreen mode
  • If we wrap the child component with a useCallback, we can avoid this case.
  const clickHandler = useCallback(() => {
    setCountB((pre) => pre + 1);
  }, []);
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay