reactjs / reactjs/react.dev

[Suggestion]: The process of commit phase is not clear.

Open
#7,429 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: documentation
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

Summary

A more detailed explanation between the process of commit phase and Browser paint. And

Page

https://react.dev/learn/render-and-commit#step-3-react-commits-changes-to-the-dom

Details

At the end of this section, it summrize that Any screen update in a React app happens in three steps:Trigger, Render and Commit, but this section is actually divided into four subsections

  1. Step 1: Trigger a render
  2. Step 2: React renders your components
  3. Step 3: React commits changes to the DOM
  4. Epilogue: Browser paint

I can't figure out if the process of commit phases include Browser paint. In the Synchronizing with Effects section, it mentions that Effect will run after every commit. I think including browser paint into the process of commit phase is expected, and it would make sense to cut down this section into just three subsections, including browser paint into submit subsection.

Also in the Synchronizing with Effects section, there are two sentences like so:

Effects run at the end of a commit after the screen updates.
By default, your Effect will run after every commit.

I am not a English navitive speaker, and I think at the end of and after have different meaning, at the end of show something happens in the process of commit , while after doesn't. It would make sense to change at the end of to another phrase.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the “Render and commit” page, especially Step 3 and the Browser paint epilogue, then compare its terminology with “Synchronizing with Effects.” Done means the documentation clearly distinguishes commit from browser paint and resolves the inconsistent “at the end of” versus “after” wording.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.