Introducción a la Gestión de Estado

¿Qué es la Gestión de Estado?

La gestión de estado es la práctica de administrar los datos que controlan cómo se comporta tu aplicación y qué muestra. En React, "estado" se refiere a cualquier dato que puede cambiar con el tiempo y afecta lo que se renderiza en la pantalla.

A medida que las aplicaciones crecen, gestionar el estado se vuelve cada vez más complejo. Los datos necesitan ser compartidos entre componentes, sincronizados con servidores y mantenidos consistentes en toda la interfaz. Aquí es donde entran las soluciones de gestión de estado.

Estado Local con useState

import { useState } from 'react';

function Contador() {
  // Estado local - solo este componente lo necesita
  const [cuenta, setCuenta] = useState(0);
  
  return (
    <div>
      <p>Cuenta: {cuenta}</p>
      <button onClick={() => setCuenta(cuenta + 1)}>
        Incrementar
      </button>
    </div>
  );
}

function Formulario() {
  const [nombre, setNombre] = useState('');
  const [email, setEmail] = useState('');
  
  return (
    <form>
      <input 
        value={nombre} 
        onChange={(e) => setNombre(e.target.value)} 
        placeholder="Nombre"
      />
      <input 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
        placeholder="Email"
      />
    </form>
  );
}

Estado Complejo con useReducer

import { useReducer } from 'react';

// La función reducer maneja las transiciones de estado
function todoReducer(estado, accion) {
  switch (accion.type) {
    case 'AGREGAR_TODO':
      return [...estado, { id: Date.now(), texto: accion.texto, hecho: false }];
    case 'ALTERNAR_TODO':
      return estado.map(todo =>
        todo.id === accion.id ? { ...todo, hecho: !todo.hecho } : todo
      );
    case 'ELIMINAR_TODO':
      return estado.filter(todo => todo.id !== accion.id);
    default:
      return estado;
  }
}

function ListaTodos() {
  const [todos, dispatch] = useReducer(todoReducer, []);
  
  const agregarTodo = (texto) => {
    dispatch({ type: 'AGREGAR_TODO', texto });
  };
  
  const alternarTodo = (id) => {
    dispatch({ type: 'ALTERNAR_TODO', id });
  };
  
  return (
    <div>
      <button onClick={() => agregarTodo('Nueva tarea')}>Agregar Todo</button>
      {todos.map(todo => (
        <div key={todo.id} onClick={() => alternarTodo(todo.id)}>
          {todo.hecho ? '✓' : '○'} {todo.texto}
        </div>
      ))}
    </div>
  );
}

El Problema: Prop Drilling

// Sin gestión de estado, los datos deben pasarse por cada nivel
function App() {
  const [usuario, setUsuario] = useState(null);
  const [tema, setTema] = useState('light');
  
  return (
    <Layout usuario={usuario} tema={tema}>
      <Header usuario={usuario} tema={tema} />
      <Main usuario={usuario} tema={tema}>
        <Sidebar usuario={usuario} tema={tema} />
        <Content usuario={usuario} tema={tema}>
          <PerfilUsuario usuario={usuario} />  {/* ¡Finalmente usa usuario! */}
        </Content>
      </Main>
    </Layout>
  );
}

// Esto se llama "prop drilling" - pasar props a través
// de muchas capas de componentes que no los usan

Panorama de Gestión de Estado