DEV Community

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

Posted on

React Basics~Render Performance/ memo

  • These are patterns that the child component would be rendred .
  1. When the parent component is re-rendered, for example when updating the state of itself or so.

  2. When the props of child component are re-rendered.

But actually, it is only needed when props are rendered to re-render the child component. Everything else is unnecessary.

・src/Example.js

mport React, { useState } from "react";
import Child from "./Child";
import "./Example.css";

const Example = () => {
  console.log("Parent render");
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  return (
    <div className="parent">
      <div>
        <h3>Parent Component</h3>
        <div>
          <button
            onClick={() => {
              setCountA((pre) => pre + 1);
            }}
          >
            Button A
          </button>
          <span>Update the state of Parent Component</span>
        </div>
        <div>
          <button
            onClick={() => {
              setCountB((pre) => pre + 1);
            }}
          >
            Buton B
          </button>
          <span>Update the state of Child Component</span>
        </div>
      </div>
      <div>
        <p>The count of clicked:{countA}</p>
      </div>
      <Child countB={countB} />
    </div>
  );
};

export default Example;
Enter fullscreen mode Exit fullscreen mode

・src/Child .js

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

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

export default Child;

Enter fullscreen mode Exit fullscreen mode
  • In this case, when we press the A(Parent component) button, the child component is rendered. Even though it is unnecessary.

・Like this.
Image description

・src/Child .js (using a memo hook)

import { memo } from "react";

function areEqual(prevProps, nextProps) {
  if (prevProps.countB !== nextProps.countB) {
    return false; // re-rendered
  } else {
    return true; // not-re-rendred
  }
}

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

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

export default ChildMemo;

Enter fullscreen mode Exit fullscreen mode
  • If we use memo, we can avoid unnecessary re-rendering.

・Like this.
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)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 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