[Suggestion]: Adding an Explanation Text to Avoid any Confusion
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
Summary
Add an explanation text to avoid any confusion about the fact that it's the component's internal state changes, not the props themselves, that actually trigger the render (cf : the Big Re-renders Myth as mentioned by Nadia Makarevich).
Page
https://react.dev/learn/render-and-commit
Details
Section : "Step 3: React commits changes to the DOM"
In this section, there is a sentence which could create some confusion for a new React Developer.
Indeed, even if it is recalled various times in this page, this sentence could bring some confusion since it is not clearly established that a re-render is triggered by state changes instead of props. Therefore, I suggest to add some short explanations to explicitly clarify this distinction.
This is also a good way to create a common thread with the next page "State as a Snapshot".
Moreover, the playground doesn't help to understand this distinction since we don't use any useState hook in this component but in the parent component (we have to fork it to see all the components):
- The original sentences :
React only changes the DOM nodes if there’s a difference between renders. For example, here is a component that re-renders with different props passed from its parent every second.
- The additional sentence :
It's worth noting that although props are updated, it's the component's internal state changes that actually trigger the render.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the react.dev/learn/render-and-commit page and inspect “Step 3: React commits changes to the DOM,” especially the sentence about re-rendering with different props and its playground. Compare it with the linked “State as a Snapshot” page, then update the explanation so the distinction is clear and verify the documentation preview and links.
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
- Clearly specified
- Newbie friendliness
- 62/100