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).