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';

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

  return (
    <div>
      <p>Contador: {count}</p>
      <button => 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 => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

Ejemplo: Input controlado

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

  return (
    <div>
      <input
        value={nombre}
        => 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).

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.
• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.
• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.