reactjs / reactjs/react.dev

Inconsistent usage of `.useState` in "Using the State Hook" article

Aperta
#3,351 0 commenti 4 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
JavaScript
Stelle
11.8k
Fork
7.9k
Merge medio
1g 11h
PR unite (30g)
11

Descrizione

Hello! 👋

This is my first contribution to the React Documentation, and I first wanted to say how much I love the documentation. I find the language style used throughout it to be simple, accessible, and therefore easy to follow.

As I was going through the documentation this weekend, I made my way from State and Lifecycle to Using the State Hook. In the former article, I noted the following piece of information, which I thought was an important detail about updating state.

https://github.com/reactjs/reactjs.org/blob/6682068641c16df6547b3fcdb7877e71bb0bebf9/content/docs/state-and-lifecycle.md#L341-L345

Meanwhile, in the "Component Class Equivalent" section in the latter document, I noticed this code example did not use a function to update state using the previous state value.

https://github.com/reactjs/reactjs.org/blob/6682068641c16df6547b3fcdb7877e71bb0bebf9/content/docs/hooks-state.md#L37-L57

I found this confusing. The point above about accommodating a possibly asynchronous state update seemed critical to ensure deterministic behaviour. I was surprised to see the code here (and throughout other parts of this article) not using a function to update the state value synchronously.

There may be a few reasons why this was done in my mind.

  • The example is small/trivial enough that using a function versus a direct update does not make a major difference.
  • This is a minor implementation detail not relevant to the usage of the state hook.

It's also possible I may have just misunderstood this example. I believe though that is not only inconsistent, but also makes the function component and class component inequivalent, because the original is completely synchronous, whereas the latter contains some potentially asynchronous behaviour.

Of course this is easily fixed by converting a line like

this.setState({ count: this.state.count + 1 })

to

this.setState((state) => ({ count: state.count + 1 })

I'm writing this first and foremost with the intention to clear up confusion that I experienced, and that others may as well. But I also want to ensure that my thinking is correct here!

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia confrontando gli esempi in content/docs/state-and-lifecycle.md e content/docs/hooks-state.md, in particolare le sezioni collegate sull'aggiornamento dello stato e sul Component Class Equivalent. Verifica se gli esempi dovrebbero usare aggiornamenti funzionali o spiegare la distinzione, quindi aggiorna l'articolo in modo che la relazione e il comportamento siano chiari e coerenti.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react
Ambito
documentation
Tipo di issue
Documentazione
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.