[Suggestion]: Adding an Explanation Text to Avoid any Confusion

Open Beginner friendly
#6,733 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

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.

Description

type: documentation
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):
image

  • 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.
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
16h 6m
Merged PRs (30d)
7

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.

More from reactjs/react.dev

All issues in reactjs/react.dev

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.