Render Cycle

Source Code

function Counter() {
  const [count, setCount] = useState(0);
  useLayoutEffect(() => {
    console.log('layout effect:', count);
  }, [count]);
  useEffect(() => {
    console.log('effect:', count);
  }, [count]);
  return <p>{count}</p>;
}

Phase

waiting

Current Tree

waiting

WIP Tree

waiting

Effects

no effects