search

donavon / hook-flow

A flowchart that explains the new lifecycle of a Hooks component. https://dwe.st/hf
MIT License
2.15k stars 79 forks source link

Dashed line between Render and React Updates DOM is probably concurrent mode only. #10

Open Izhaki opened 3 years ago

Izhaki commented 3 years ago

The legend does not clarify what is the difference between a dashed and solid lines (would be nice if it would).

I can only guess that a dashed line mean "even loop released" and any stages connected by a solid line are part of the same sync task.

If I'm wrong, then the rest of this issue is not valid.

We are having a bit of a debate on a bug in an "official" React example, and I wrote a codesandbox that shows you can only have a setInterval callback invoked after useLayoutEffect or useEffect.

image

Concurrent mode

Initially I gathered that the dashed line between Render and React Updates DOM is only valid in concurrent mode, but as [this codesandbox demonstrates, in concurrent mode it seems that nowhere between Render and Run Effects there should be a dashed line:

image