Don't Create Nested Components

Whenever the Parent component updates, Child1 and Child2 will be re-created 💩🧨💣

function Parent(props) {
  const [state, setState] = useState(props.initialData);

  function Child1() {
    return <div>Child1: {state}</div>;
  }

  function Child2() {
    return <div>Child2: {state}</div>;
  }

  return (
    <>
      <Child1 />
      <Child2 />
    </>
  );
}

DO ✅

function Child1({ state }) {
  return <div>Child1: {state}</div>;
}

function Child2({ state }) {
  return <div>Child2: {state}</div>;
}

function Parent(props) {
  const [state, setState] = useState(props.initialData);

  return (
    <>
      <Child1 state={state} />
      <Child2 state={state} />
    </>
  );
}