3 cosas importantes que debe saber sobre el estado en React

React … Todos conocemos la popularidad de este framework entre desarrolladores o programadores. React se sienta en la parte superior de toda la popular biblioteca de JavaScript. Es realmente importante entender el concepto de React y sus diferentes segmentos. 

Estado que es el corazón de React es el concepto más importante para aprender. Cómo se comporta, cómo cambia y cómo funciona en las diferentes partes del componente. Al ser un desarrollador de React, debe saber cómo usarlo correctamente. Tendrá que evitar algunos errores comunes a medida que crea su aplicación. 

En este artículo, discutiremos las cinco partes más esenciales del estado. Estas partes se construyen una sobre la otra para que entiendas los temas complejos de React. Para que los conceptos queden claros, comentaremos muchos ejemplos prácticos que puedes comprobar por tu cuenta.

1. La actualización de estado con useState no se puede fusionar. 

Cuando un desarrollador de React pasa del componente basado en clases al componente basado en funciones utilizando ganchos de React , las actualizaciones de estado ya no se fusionan automáticamente. 

Puede llamar a useState hook tantas veces como quiera para usar tantas variables como necesite. En el ejemplo que se muestra a continuación… tenemos un formulario básico con entrada de correo electrónico y contraseña. Vamos a gestionar el estado de cada uno de ellos como variables de estado individuales.

import React from "react";
  
export default function App() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  
  return (
    <form>
      <input
        name="email"
        type="email"
        placeholder="Email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        name="password"
        type="password"
        placeholder="Password"
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Ahora hagamos algunos cambios en el ejemplo anterior. Podemos administrar el estado del formulario dentro de un solo objeto. Esto le permitirá llamar a useState solo una vez. El correo electrónico y la contraseña no serán administrados por la variable de estado individual. 

Ahora la pregunta es… ¿Cómo podemos actualizar el estado con la función setState cuando es un objeto?

En la entrada de formulario, podemos agregar onChange prop. Este accesorio onChange será manejado por el controlador de eventos genérico. Eche un vistazo a la instantánea del código que se muestra a continuación…

import React from "react";
  
export default function App() {
  const [state, setState] = React.useState({
    email: '',
    password: ''
  })
  
  function handleInputChange(e) {
    setState({
      [e.target.name]: e.target.value
    })
  }
  
  return (
    <form>
      <input
        name="email"
        type="email"
        onChange={handleInputChange}
      />
      <input
        name="password"
        type="password"
        onChange={handleInputChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

En el ejemplo anterior, el estado se actualiza de acuerdo con el nombre de la entrada que el usuario está escribiendo actualmente. Este patrón se usa básicamente en los componentes basados ​​en clases, pero no funciona con el enlace useState. Cuando actualiza el estado con la función setState de useState, no se fusiona automáticamente. 

¿Qué significa exactamente…?

Simplemente significa que el estado anterior no se incluye cada vez que configuramos el estado a medida que el usuario escribe. Ahora, ¿cuál es la solución o la opción para incluir el estado?  

Podemos hacerlo manualmente usando el operador de propagación.

import React from "react";
  
export default function App() {
  const [state, setState] = React.useState({
    email: '',
    password: ''
  })
  
  function handleInputChange(e) {
    setState({
      // spread in previous state with object spread operator
      ...state,
      [e.target.name]: e.target.value
    })
  }
  
  return (
    <form>
      <input
        name="email"
        type="email"
        onChange={handleInputChange}
      />
      <input
        name="password"
        type="password"
        onChange={handleInputChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

2. Las actualizaciones de estado deben ser inmutables

El estado de reacción debe administrarse y actualizarse de la manera correcta. Para administrar el estado con el enlace useState, solo debe usar la función de establecimiento dedicada, proporcionada como el segundo elemento en la array, obtiene de useState para actualizarlo. Si no lo hace e intentará actualizarlo manualmente usando el ejemplo simple de JavaScript, entonces no encontrará el comportamiento esperado de su aplicación. 

Recuerde que el estado actualizado correctamente provoca un re-renderizado de nuestro componente. Ahora hay una pregunta… ¿qué pasará con el estado si lo actualizamos a nuestra manera en lugar de «Reaccionar»? En ese caso, cuando algo cambie, React se encargará de mostrar y renderizar el componente. 

El punto es… si actualiza el estado con JavaScript simple en lugar de setState, entonces no activará una nueva representación y React no mostrará los cambios en el estado al usuario. 

En React, es importante saber cómo actualizar el estado usando React, cuál es el gancho de estado apropiado para cumplir con sus propósitos. Puede elegir useReducer, useState o una biblioteca de administración de estado de terceros como Redux. No puede actualizar o mutar su estado directamente.

Las actualizaciones de estado deben ser inmutables siempre. Mutar su estado directamente hará que su estado sea impredecible y puede causar problemas no deseados en su aplicación. 

import React from 'react';
  
export default function App() {
  const [count, setCount] = React.useState(0);
    
  // Don't assign state to new (non-state) 
  // variables. Below code is not acceptable.
  const newCount = count;
    
  // Don't directly mutate state
  const countPlusOne = count + 1;
  
  return (
    <>
      <h1>Count: {count}</h1>
    </>
  );
}

3. Las actualizaciones de estado son asincrónicas y programadas, no se pueden realizar de inmediato

Otro concepto importante a considerar es que las actualizaciones de estado no se realizan de inmediato. Si echa un vistazo a la documentación de React, encontrará qué sucede exactamente cuando llama a la función setState. Puede usarlo para actualizar la variable de estado asociada con él. Puede echar un vistazo a la documentación de React y ver qué sucede exactamente cuando llama a la función setState. 

Puede usarlo para actualizar la variable de estado asociada con él. Se nos dice que acepta un nuevo valor de estado y pone en cola una nueva representación del componente. ¿¿Qué significa??

Significa que los componentes no se vuelven a renderizar inmediatamente. Esto sucede generalmente con fines de rendimiento y da una mejor idea de lo que React está haciendo debajo del capó.  

La función setState no actualiza el estado inmediatamente, simplemente programa una actualización de estado para algún tiempo en el futuro. No es fácil mirar el código y ver exactamente cuándo ocurrió o ocurrirá la actualización de estado. 

Esto es bueno para comparar el useRef, que hemos mencionado anteriormente para poder conservar los datos teniendo en cuenta su propiedad actual. Las actualizaciones realizadas con useRef se realizan de forma síncrona. Mire el código para ver exactamente cuándo se realizó una actualización en useRef, no con useState.

Conclusión

Como hemos discutido, el estado es el corazón de React. Cuando trabaja en React, debe tener cuidado al escribir el código. El comportamiento del estado es muy importante, y es importante comprender cómo está tratando con el estado en su aplicación React. El segundo punto de este artículo es muy importante de entender. Una vez que comience a trabajar en React y a medida que progrese, verá que le va mejor en su proyecto. Lo mejor para entender el comportamiento del estado es romper el código y ver cómo funcionan las cosas.