Estados en React

Paso 5: Manejar los Estados con useState

En este quinto paso le daremos memoria y reactividad local a nuestros componentes utilizando useState.

Hasta el paso 4, las variables comunes de JavaScript no lograban actualizar la pantalla porque React no se enteraba de los cambios. 📍 Con useState, le pedimos a React que mantenga un valor y vuelva a renderizar la interfaz automáticamente cada vez que ese valor cambie.

Código del Paso 5 (index.html)

Conceptos clave del Paso 5:

  1. La tupla de useState: const [valor, setValor] = useState(inicial). El primer elemento es la variable de lectura; el segundo es la función que se usa para modificar ese valor.
  2. Componentes Controlados: Al poner value={texto} y onChange={(e) => setTexto(e.target.value)}, el valor del <input> pasa a estar 100% bajo el control de React.
  3. Aislamiento de estado: Si se ejecuta el código del paso 5 en el navegador y se hace clic en la primera tarea, se puede apreciar que solo esa tarea cambia a Completada. Cada instancia de TodoItem guarda su propio estado de forma totalmente independiente.
  4. La limitación actual: Si se escribe un nuevo texto en TodoForm y se clica sobre Añadir, no es posible agregarlo a la lista. Esto sucede porque el estado del input vive dentro de TodoForm y la lista de tareas vive dentro de TodoList, con lo cual no tienen forma de comunicarse directamente.

Para resolver esto pasaremos al Paso 6: Compartir Estados (Lifting State Up).