reactjs / reactjs/react.dev

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

Abierto
#3,351 0 comentarios 4 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
JavaScript
Estrellas
11.8k
Forks
7.9k
Merge medio
1 d 11 h
PR fusionados (30 d)
11

Descripción

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!

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza comparando los ejemplos de content/docs/state-and-lifecycle.md y content/docs/hooks-state.md, especialmente las secciones enlazadas sobre la actualización del estado y el Component Class Equivalent. Revisa si los ejemplos deberían usar actualizaciones funcionales o explicar la distinción y, después, actualiza el artículo para que la relación y el comportamiento sean claros y coherentes.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react
Área
documentation
Tipo de issue
Documentación
Dificultad
2/5
Tiempo estimado
1-3 horas
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.