Confusing setState() documentation
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 1 T. 11 Std.
- Gemergte PRs (30 T.)
- 11
Beschreibung
I have a general question about setState() because the documentation about this is a little bit confusing:
I have a component with a state. This state should only be updated (re-rendered) when a condition met. If not then there is no need to re-render the component. Reading the docs about setState tells me that reading this.state right after calling setState() is a potential pitfall. Instead I should use setState with an updater function because there prevState is guaranteed to has the right value. So my first approach was:
class MyComponent extends React.Component {
onSomething = () => {
this.setState(prevState => {
if (prevState.counter < 10) {
return { counter: prevState.counter + 1 };
}
return prevState;
});
}
}
But with that approach my component always get re-rendered because setState() always forces a re-render (in the beginning I thought that when I return the same prevState object React does nothing. But I was wrong). So what else can I do to avoid re-rendering?
Again in the same doc we can read that calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders. So I could re-write my code into following:
class MyComponent extends React.Component {
onSomething = () => {
if (this.state.counter < 10) {
this.setState(prevState => {
return { counter: prevState.counter + 1 };
});
}
}
}
But then if (this.state.counter < 10) could have a different value than prevState.counter
So on the one side the docs recommend to not read from this.state directly because the calls to setState() could be batched and this.state has an outdated value but on the other side it recommends to call setState() only when the new state differs from the old state. But how can I check if the state differs when it could be potentially outdated?
In the end I don't know actually how to set my state and avoid a re-rerender when a condition met. Any help here would be great.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit der verlinkten Dokumentation zu setState() und den Beispielen in diesem Issue und überprüfe anschließend, wie Updater-Funktionen, Batching und erneutes Rendern beschrieben werden. Als abgeschlossen gilt die Aufgabe, wenn die Dokumentation den scheinbaren Widerspruch eindeutig auflöst und erklärt, wie sich ein unnötiges erneutes Rendern vermeiden lässt, wenn die Bedingung erfüllt ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 35/100