So how to start a business without money?

1. Modificar el estado directamente

Al cambiar el estado de un componente, es importante que devuelva una nueva copia del estado con modificaciones, no modifique el estado actual directamente. Si modifica incorrectamente el estado de un componente, el algoritmo diferencial de React no detectará el cambio y su componente no se actualizará correctamente.

Veamos un ejemplo. Digamos que tiene un estado que se parece a esto:

Y ahora desea agregar el color amarillo a esta matriz. Puede resultar tentador hacer esto:

O incluso esto:

¡Pero ambos enfoques son incorrectos! Al actualizar el estado en un componente de clase, siempre debe usar el método setState y siempre debe tener cuidado de no mutar objetos.

Esta es la forma correcta de agregar el elemento a la matriz:

Y esto nos lleva directamente al error número 2.

2. Establecer el estado que se basa en el estado anterior sin utilizar una función

Hay dos formas de utilizar el método setState. La primera forma es proporcionar un objeto como argumento. La segunda forma es proporcionar una función como argumento. Entonces, ¿cuándo querría usar uno sobre el otro?

Si tuviera, por ejemplo, un botón que se puede habilitar o deshabilitar, es posible que tenga una parte del estado llamada isDisabled que contiene un valor booleano. Si desea cambiar el botón de habilitado a deshabilitado, podría ser tentador escribir algo como esto, usando un objeto como argumento:

Entonces, ¿qué hay de malo en esto? El problema radica en el hecho de que las actualizaciones de estado de React se pueden agrupar, lo que significa que pueden ocurrir múltiples actualizaciones de estado en un solo ciclo de actualización. Si sus actualizaciones se iban a agrupar y tenía varias actualizaciones en el estado habilitado / deshabilitado, es posible que el resultado final no sea el esperado.

Una mejor manera de actualizar el estado aquí sería proporcionar una función del estado anterior como argumento:

Ahora, incluso si sus actualizaciones de estado se agrupan y se realizan varias actualizaciones al estado habilitado / deshabilitado juntas, cada actualización dependerá del estado anterior correcto para que siempre termine con el resultado que espera.

Lo mismo es cierto para algo como incrementar un contador.

No haga esto:

Haga esto:

La clave aquí es que si su nuevo estado se basa en el valor del estado anterior, siempre debe usar una función como argumento. Si establece un valor que no depende del valor del estado anterior, puede usar un objeto como argumento.

3. Olvidar que setState es asincrónico

Finalmente, es importante recordar que setState es un método asincrónico. Como ejemplo, imaginemos que tenemos un componente con un estado que se ve así:

Y luego tenemos un método que actualiza el estado y luego registra el estado en la consola:

Puede pensar que esto registraría ‘Matt’ en la consola, ¡pero no es así! ¡Registra 'John'!

La razón de esto es que, nuevamente, setState es asincrónico. Eso significa que va a iniciar la actualización de estado cuando llegue a la línea que llama a  setState, pero el código a continuación continuará ejecutándose ya que el código asincrónico no es bloqueante.

Si tiene un código que necesita ejecutar después de que se actualice el estado, React le permite proporcionar una función de devolución de llamada que se ejecuta una vez que se completa la actualización.

Una forma correcta de registrar el estado actual después de la actualización sería:

¡Mucho mejor! Ahora registra correctamente ‘Matt’ como se esperaba.

Conclusión

¡Ahí tiene! Tres errores comunes y cómo solucionarlos. Recuerde, está bien cometer errores. Está aprendiendo. Estoy aprendiendo. Todos estamos aprendiendo. Sigamos aprendiendo y mejorando juntos.