javascript - React child useEffect triggered earlier than parent useEffect

Question

While app rendering, child Component useEffect triggered earlier than parents Layer useEffect . Why it happens and how to fix this issue? Please advice

Layer:

const Layer = (p) => {
     useEffect(() => {
         console.log(token, "Layer token");
     }, []);
    return (
        <>
            {p.children}
        </>
    )
}
export default Layer;

Component:

const Component = () => {
     useEffect(() => {
         console.log(token, "Component token");
     }, []);
    return (
        <></>
    )
}
export default Component;

Usage:

<Layer>
 <Component/>
</Layer>

Answer 1

You can just have a render condition in Layer component:

const Layer = (p) => {
  const [isCalled, setIsCalled] = React.useState(false);
  React.useEffect(() => {
    if (!isCalled) {
      console.log("A");
      setIsCalled(true);
    }
  }, [isCalled]);
  return <>{isCalled && p.children}</>;
};

const Component = () => {
  React.useEffect(() => {
    console.log("B");
  }, []);
  return <></>;
};

Will log: "A", "B".

https://codesandbox.io/s/render-condition-call-80rc8