Manejando multiples estados

Organizando el estado

Multiples useState

function Formulario() {

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

  const [email, setEmail] = useState('');

  const [password, setPassword] = useState('');

  const [errors, setErrors] = useState({});

  const [isSubmitting, setIsSubmitting] = useState(false);



  // Cada estado es independiente

  // Util cuando no estan relacionados

}

Estado agrupado

function Formulario() {

  // Agrupa estados relacionados

  const [form, setForm] = useState({

    nombre: '',

    email: '',

    password: ''

  });



  const [ui, setUi] = useState({

    isSubmitting: false,

    errors: {}

  });



  const handleChange = (e) => {

    const { name, value } = e.target;

    setForm(prev => ({ ...prev, [name]: value }));

  };

}

Cuando separar vs agrupar?

• Separar: Estados que cambian independientemente


• Agrupar: Estados que siempre cambian juntos

Ejemplo practico: Filtros

function ProductList() {

  // Estados de filtro (relacionados)

  const [filters, setFilters] = useState({

    categoria: 'all',

    precioMin: 0,

    precioMax: 1000,

    ordenar: 'nombre'

  });



  // Estado de datos (independiente)

  const [productos, setProductos] = useState([]);



  // Estado de UI (independiente)

  const [isLoading, setIsLoading] = useState(false);



  const updateFilter = (key, value) => {

    setFilters(prev => ({ ...prev, [key]: value }));

  };



  return (

    <div>

      <select

        value={filters.categoria}

        onChange={(e) => updateFilter('categoria', e.target.value)}

      >

        <option value="all">Todas</option>

        <option value="tech">Tecnologia</option>

      </select>



      <input

        type="range"

        value={filters.precioMax}

        onChange={(e) => updateFilter('precioMax', e.target.value)}

      />

    </div>

  );

}

Levantando el estado (Lifting State)

// Cuando dos componentes necesitan compartir estado,

// muevelo al componente padre mas cercano



function App() {

  const [temperatura, setTemperatura] = useState(20);



  return (

    <div>

      <TermometroA temp={temperatura} onCambiar={setTemperatura} />

      <TermometroB temp={temperatura} onCambiar={setTemperatura} />

    </div>

  );

}

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.