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

user_10328862 0
Viewed 10939

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.

reactjs javascript
2 Answers

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);
user_73814660

You gonna have to set up a Redux state

Or you just isolate the React Hook useState, make a good component destructuring :)

App.js

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

function App() {
  return (
    <div className="App">
      <Parent />
      <Child data={"any data"} />
    </div>
  );
}

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

parent.js

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

  const handleClick = () => {
    setAnyState(!any_state);
  };
  return (
    <>
      Parent Page ({any_state ? "true" : "false"})
      <br />
      <button onClick={handleClick}>Click me</button>
    </>
  );
}
user_102940220
Related