reactjs / reactjs/react.dev

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

Offen Anfängerfreundlich
#6,733 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

type: documentation
Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Öffne die Seite react.dev/learn/render-and-commit und untersuche „Step 3: React commits changes to the DOM“, insbesondere den Satz über das erneute Rendern mit anderen Props und das dazugehörige Playground. Vergleiche sie mit der verlinkten Seite „State as a Snapshot“, aktualisiere dann die Erklärung, sodass die Unterscheidung klar ist, und überprüfe die Dokumentationsvorschau und die Links.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
62/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.