reactjs
Wording Suggests Effects Run Before Commit
There is a paragraph from the docs:
Rendering refers to calculating what the next version of your UI should look like. After rendering, Effects are flushed (meaning they are run until there are no more left) and may update the calculation if the Effects have impacts on layout. React takes this new calculation and compares it to the calculation used to create the previous version of your UI, then commits just the minimum changes needed to the DOM (what your user actually sees) to catch it up to the latest version.
See the bold parts. The way this paragraph is written someone may think effects are run before commit, which is not the case.
Why is it confusing?
- See how the paragraph initially mentions, "after rendering, effects are flushed" (notice no mention of commit)
- Then it says Effects "may update calculation if the Effects have impacts on layout" (this suggests effects can update the render from step 1? no commit mentioned yet).
- Then only in the end of the paragraph, it mentions "then commits just the minimum..."
So reader reading this, might think:
render->effects flushed->update calculation (previous render basically) -> commit
Which imho is wrong, at least effects run after commit.
So I think it would be helpful if docs improve this paragraph and make clear what is meant.
Yeah agreed, this should say:
After rendering, React takes this new calculation and compares it to the calculation used to create the previous version of your UI. Then React commits just the minimum changes needed to the DOM (what your user actually sees) to apply the changes. Finally, Effects are flushed (meaning they are run until there are no more left). For more detailed information see the docs for Render and Commit and Effect Hooks.
For a moment I thought maybe the original paragraph meant useLayoutEffect, but it would be weird to talk about that in that section. Besides the link was to useEffect. But even in that case, imho that paragraph would still not fully make sense.