score:15

Accepted answer

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

score:-5

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>
    </>
  );
}


Related Query

More Query from same tag