Lección 8 de 13 · Lectura y práctica

Introduccion a useState

Estado: Datos que cambian El estado (state) son datos que pueden cambiar durante la vida de un componente. Cuando el estado cambia, React re-renderiza el componente. useState: El hook basico import { useState } from 'react';.

Del concepto a la práctica

Taller de esta lección

useState representa un dato que cambia por interacción y cuya modificación debe provocar un nuevo render. En una reserva, el libro elegido puede comenzar vacío y pasar a contener un identificador. El setter es la única vía que mantiene esa transición visible para React.

Ejemplo resuelto

jsx

import {useState} from 'react';
function Selector() {
  const [libroId, setLibroId] = useState(null);
  return <button onClick={() => setLibroId('b-02')}>{libroId ?? 'Sin selección'}</button>;
}

Antes del clic aparece “Sin selección”; después aparece b-02.

Pruébalo

Importa useState desde React.
Inicializa la selección con null.
Actualízala desde un evento de botón.
Renderiza un texto alternativo cuando no haya selección.

Comprueba tu resultado

La secuencia visible debe ser “Sin selección” y luego “b-02”.

Error frecuente: asignar libroId = 'b-02'; corrígelo llamando a setLibroId. Otro error es iniciar con una cadena cuando el resto del código espera null; conserva un tipo inicial coherente y trata explícitamente el caso vacío.

Hook importado y transición

El ejemplo de Selector necesita import {useState} from 'react' antes de la función, y se monta con <Selector/> desde App. Los hooks se llaman en el nivel superior del componente, antes de cualquier retorno condicional; no dentro de onClick, un bucle o una condición. Aquí el estado es null | string: no significa que todas las variables deban conservar siempre exactamente el tipo inicial. Lo importante es declarar qué representa cada alternativa y manejar la ausencia.

Un primer clic selecciona b-02; pulsar de nuevo asigna el mismo identificador. React puede omitir trabajo cuando el valor no cambia, así que no evalúes esta práctica contando renders. La selección es local a esa instancia de Selector; dos instancias mantienen dos estados independientes. Si ambas deben compartir selección, eleva el estado al padre común. El setter solicita la próxima representación: leer libroId inmediatamente después de llamarlo en el mismo handler sigue leyendo la instantánea de ese render. Comprueba el texto posterior en pantalla, no una suposición basada en ese log. Al desmontar y volver a montar, la selección empieza de nuevo sin persistencia.

Secuencia de render con count 0, evento y setCount(1); el handler aún lee 0 y la siguiente vista muestra count 1. — **El estado es una instantánea**
Cada render y sus handlers leen una instantánea del estado. El setter solicita el valor siguiente; leer la variable en el mismo handler conserva la instantánea anterior, y la próxima vista muestra 1.
Ver la infografía en tamaño completo ↗

Estado: Datos que cambian

El estado (state) son datos que pueden cambiar durante la vida de un componente. Cuando el estado cambia, React re-renderiza el componente.

useState: El hook basico

import { useState } from 'react';

function Contador() {
  // useState retorna [valor, funcionParaCambiar]
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Anatomia de useState

const [estado, setEstado] = useState(valorInicial);

// estado: el valor actual
// setEstado: funcion para actualizar
// valorInicial: valor al montar el componente

Diferentes tipos de estado

// Numeros
const [count, setCount] = useState(0);

// Strings
const [nombre, setNombre] = useState('');

// Booleanos
const [isOpen, setIsOpen] = useState(false);

// Arrays
const [items, setItems] = useState([]);

// Objetos
const [user, setUser] = useState({ name: '', email: '' });

// null/undefined
const [data, setData] = useState(null);

Ejemplo: Toggle

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

Ejemplo: Input controlado

function FormularioNombre() {
  const [nombre, setNombre] = useState('');

  return (
    <div>
      <input
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
        placeholder="Tu nombre"
      />
      <p>Hola {nombre || 'desconocido'}!</p>
    </div>
  );
}

Nunca modifiques el estado directamente. Siempre usa la funcion setter (setCount, setNombre, etc).

Sigue con React Fundamentals

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: Children: Componentes contenedores Siguiente: Actualizando estado correctamente →Entrar y guardar mi progreso