Component in Component

Reason - reconciliation

Hello there, I'm Stupid

export const ComponentInComponent = () => {
  const [, rerender] = useReducer((x) => x + 1, 0);

  const Stupid = () => {
    // useEffect, mount/unmount logs
    return <div>Hello there, I'm Stupid</div>;
  };

  return (
    <>
      <Stupid />
      <button onClick={rerender}>Re-render parent</button>
    </>
  );
};

When React does reconciliation, it sees two different components, both old and new. Stupid was just created in the comp function body. It has a different reference. React thinks different component, unmounts old mounts new

Before re-render

After re-render

{
 type: ComponentInComponent,
 props: {
   children: [
     {type: Stupid, ...}
   ]
 }
}

{
 type: ComponentInComponent,
 props: {
   children: [
     {type: Stupid, ...}
   ]
 }
}