Question：What does the color on the picture mean ？

[Mark24Code]

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?

[paroxyzm]

I'd like to know too. If the yellow color means "the part handled by the browser", then how can the browser run effects?

Or, what is the mechanism between the browser and React, that tells React that "it's time to run effects because I've painted the screen"?

[01abhishekjain]

I'd like to know about this too.

Maybe @donavon can help? Or point to some resource for further study?

[Nurou]

For anyone else confused, this is how I understand it:

• A component can be in one of three distinct lifecycle phases (mount, update, unmount), represented by the columns in the diagram.
• The actions (e.g. 'Render', Run Effect', 'Cleanup Effects', etc.) can occur in one or more of these phases. They are represented by the rows (they span the whole row, but are marked within a specific column - potentially confusing).
• Whether or not any one of these given actions occurs during a lifecycle phase is indicated by the background colour of the column for any of these rows. If the background colour is faded, the action does not occur in that lifecycle phase. Conversely, if the background colour is vivid, then that action does occur during that particular lifecycle phase. This is the significance of the background colour.

An example: The (component) 'Render' action occurs whenever a component mounts or is updated. However, it does not occur when a component unmounts, hence the faded green background colour in the 'unmount' column. Similarly, 'Run lazy initialisers' only runs when a component first mounts, hence the rich background colour in the mount column, and fade in the case of the other two columns.