Estado local con useState

Dale memoria a tus componentes con useState para poder mostrar valores que cambian a medida que el usuario interactúa.

8 min · 3 preguntas

Un contador de me gusta, el texto escrito en un campo de búsqueda, un menú que se abre y se cierra: todos estos valores cambian mientras se usa la aplicación. Una variable normal no basta, porque React no refresca la pantalla cuando cambia. Necesitas lo que se llama estado: una memoria que pertenece al componente. Lo creas con useState, un hook, es decir, una función especial que proporciona React cuyo nombre empieza por use.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Analicemos la línea clave: const [count, setCount] = useState(0);. useState(0) crea un estado con el valor inicial 0 y devuelve un array de dos elementos, que obtienes mediante desestructuración: count es el valor actual, y setCount es la función de actualización, la única manera permitida de cambiar ese valor. Aquí, onClick dispara setCount(count + 1) con cada clic (veremos los eventos en detalle en la siguiente lección).

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}!</p>
    </div>
  );
}

Cuando llamas a setName, React hace dos cosas: almacena el nuevo valor y luego vuelve a ejecutar tu función de componente para recalcular la salida. Esto se llama re-render. Por eso el párrafo Hello, {name}! se actualiza solo con cada letra escrita: tú describes el resultado, React se encarga del resto.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué devuelve la llamada useState(0)?
   • Solo el valor actual del estado
   • Un array con el valor actual y su función de actualización
   • Un objeto que contiene todo el estado del componente
2. ¿Cuál es la forma correcta de aumentar el contador?
   • count = count + 1
   • useState(count + 1)
   • setCount(count + 1)
3. ¿Qué ocurre cuando llamas a la función de actualización de un estado?
   • React vuelve a ejecutar el componente para refrescar la pantalla
   • Se recarga toda la página en el navegador
   • Nada, también tienes que refrescar la página manualmente