How to stop re render child component when any state changed in react js?

Question

I have a parent componenet, Inside this I have included a child component with props. but When any state is changed in parent component (that doesn't related to child component) then child component re-render. I don't want this re render on every state change. Can we stop?

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Child from "./child";
import "./styles.css";

function App() {
  const [any_state, setAnyState] = useState(false);

  const handleClick = () => {
    setAnyState(!any_state);
  };
  return (
    <div className="App">
      Parent Page ({any_state ? "true" : "false"})
      <br />
      <button onClick={handleClick}>Click me</button>
      <Child data={"any data"} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

child.js

import React from "react";

function Child(props) {
  console.log("child component");
  return <div className="App">child Page</div>;
}

export default Child;

https://codesandbox.io/s/clever-oskar-fpxm3?fontsize=14

I don't want "child component" to be displayed in console on every state change.

Answer 1

You want to use React.memo for this. Read more here.

This will prevent re-renders when props did not change.

Instead of export default Child; use export default React.memo(Child); in your child.js.

import React from "react";

function Child(props) {
  console.log("child component");
  return <div className="App">child Page</div>;
}

export default React.memo(Child);