𝗚𝘂𝗶́𝗮 𝗱𝗲 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗲𝗻 𝗥𝗲𝗮𝗰𝘁

Tu barra de contraseña cambia de débil a fuerte a medida que escribes. React recuerda lo que escribes a través del estado.

El estado contiene datos. Rastrea lo que escribes o haces clic.

Imagina que escribes tu nombre.

  • Tu estado inicial es una cadena vacía.
  • Escribes J.
  • Llamas a una función para actualizar el estado de "" a "J".
  • Escribes o.
  • Llamas a la función para cambiar el estado a "Jo".

Cada vez que actualizas el estado, React vuelve a renderizar la UI. El renderizado significa que React limpia la vista anterior y dibuja una nueva con tus datos actualizados.

¿Por qué no usar variables comunes? Una variable común cambia en tu código pero no actualiza la pantalla. Tus usuarios verán datos antiguos. El estado de React soluciona esto conectando tus datos con tu UI.

Cómo usar useState:

  1. Impórtalo desde React. import { useState } from 'react';

  2. Decláralo. const [age, setAge] = useState(20);

En este ejemplo:

  • age es tu valor actual.
  • setAge es la función para cambiar el valor.
  • 20 es tu valor inicial.

Inténtalo ahora. Abre un proyecto de React. Crea un contador. Haz clic en un botón para actualizar el conteo. Observa cómo la pantalla cambia instantáneamente.

Fuente: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i