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.

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:

Question：What does the color on the picture mean ？

The colors don't seem to match the ones listed in Chrome's performance panel. So what is the color here saying?

I don't know what LayoutEffects are. Maybe you can add another note explaining the term.

Running the npx command on Windows prints a confusing "The System cannot find the path specified" error message.
Any objections to using https://www.npmjs.com/package/open instead?