Al final de la última conferencia,
Dije que solo deberíamos actualizar el estado usando
la función de establecimiento, pero no confíes sólo en mí en eso.
Entonces, en lugar de eso, exploremos esto y rompamos React.
Entonces, solo para ver qué pasa cuando intentamos
para actualizar el estado manualmente.
Ahora, ahora mismo tenemos este estado de paso aquí,
definida como una variable constante
y por eso no podríamos ni siquiera cambiarlo.
Entonces, cambiemos esto a let
Y entonces podremos romper esto.
Entonces, digamos el siguiente nivel en el identificador,
en lugar de actualizar el estado de la manera correcta,
lo haríamos así.
Entonces, paso es igual a paso más uno.
Sería una manera perfectamente normal
de actualizar una variable definida con let, ¿no?
Y ahora mismo, esta es una variable let,
entonces una variable que podemos actualizar.
Y nuevamente, esta sería una manera perfectamente normal.
de actualizar variables en JavaScript.
Pero veamos qué sucede ahora cuando hacemos clic en este botón.
Pues simplemente no pasa nada.
Entonces, no recibimos ningún error de React,
pero simplemente no pasa nada.
Y entonces, la razón de esto es que React no tiene manera
de saber que en realidad se trata de intentar actualizar el estado.
Entonces, React no tiene una forma mágica de saberlo.
que esta aquí es la variable de estado
y que esta operación es básicamente actualizarlo.
De nuevo, React no sabe sobre eso.
y es por eso que React nos proporcionó
con esta función de establecimiento aquí, que es una forma funcional
de actualizar el valor del estado, pero sin mutarlo.
Porque aquí directamente estamos mutando ahora.
esta variable de paso, ¿verdad?
Pero React tiene que ver con la inmutabilidad.
Y entonces, por lo tanto, sólo podemos actualizar el estado usando
las herramientas que nos brinda React.
Entonces, en este caso, esta función de paso establecido.
Y entonces esta función de establecimiento está realmente ligada
a esta variable de estado aquí mismo.
Entonces, cuando usamos esta forma funcional de actualizar el estado,
entonces React sabe que esta es la variable de estado
eso debería actualizarse, ¿vale?
Así que nunca cometas este error, solo usa siempre const
y siempre usa la función setter, ¿vale?
Ahora, otra forma en la que esto podría suceder,
lo cual podría ser un poco menos obvio,
es cuando usamos un objeto o una matriz para el estado.
Entonces, hagamos un experimento rápido aquí.
Entonces, digamos prueba, por ejemplo, y luego usemos estado.
Y aquí, por defecto, pasamos un objeto.
Y démosle alguna propiedad de nombre.
Ahora, observen que aquí en la desestructuración,
Solo saqué la variable de estado en sí.
Entonces, ahora ni siquiera tengo la función de establecimiento.
Y aquí, digamos que quería actualizar este nombre.
Bueno, primero imprimamos también aquí.
Entonces, prueba.nombre.
Entonces llevamos a Jonas allí.
Y luego aquí, podríamos pensar que esto
Así es como actualizamos ese estado.
Entonces prueba.nombre.
Y ahora usemos a Fred, por ejemplo.
Entonces, solo algún otro nombre y sí,
Mira lo que sucede cuando hago clic en Siguiente ahora.
Y eso realmente funcionó.
Entonces, mutar el objeto de esta manera en realidad desencadenó
una nueva representación de la vista del componente.
Sin embargo, mutar objetos como este es realmente una
Realmente mala práctica.
Entonces, React realmente no quiere que hagas esto.
y eso es porque a veces, en situaciones más complejas,
esto en realidad no funcionará.
Y en general, es realmente una mala práctica.
de objetos mutantes como este,
especialmente en un marco como React,
que tiene que ver con la inmutabilidad
y actualizaciones del estado funcional.
Así que nunca hagas esto.
Entonces, si realmente deseas actualizar este objeto aquí,
Nuevamente crearíamos una función de establecimiento aquí.
Entonces, no crear, sino básicamente tomar esta función de establecimiento.
fuera del estado de resultado del uso.
Y luego aquí llamaríamos a esa función de establecimiento.
y luego pase el nuevo objeto completo.
Entonces, el nombre ahora debería ser Fred.
Entonces, volvemos a lo que teníamos antes.
Y ahora, si hacemos clic en Siguiente, todavía se actualiza el nombre.
a Fred, pero lo hace de la manera correcta.
Por lo tanto, trate siempre el estado como inmutable en React.
Entonces, como algo que no puedes cambiar directamente,
pero eso solo puedes cambiar usando las herramientas
que nos da React.
Entonces, usando la función de establecimiento de estado.