A simple quiz to illustrate how React rendering works.
import React from "react";
export default Parent;
function Parent() {
console.log("1");
React.useEffect(() => {
console.log("2");
}, []);
return (
<>
Parent component
<br />
<Child />
</>
);
}
function Child() {
console.log("3");
React.useEffect(() => {
console.log("4");
}, []);
return <span>Child component</span>;
}
Try to guess what will be printed to console.
Answer
Some explanation:
⇾ First Parent is parsed and rendered, without useEffect,
⇾ after that Child, when there is no more nested components is turn of async hooks
⇾ React will run useEffect from children to parents.
Few more logs, probably related to dev mode.
Top comments (0)