¿Qué es el Estado Global en React?

El estado global se refiere a datos que necesitan ser accesibles por múltiples componentes en diferentes niveles de tu aplicación React, sin importar su ubicación en el árbol de componentes.

Características del estado global:

Compartido: Accesible desde cualquier componente que lo necesite

Centralizado: Gestionado en un único lugar (como un Context o store)

Reactivo: Cambios se propagan a todos los componentes que lo usan

Ejemplo común: Autenticación

El estado isAuthenticated necesita ser conocido por:

• Navbar (para mostrar perfil/logoout)
• Rutas protegidas (para redireccionar)
• Componentes que muestran contenido condicional

El Problema del Props Drilling

Props drilling ocurre cuando pasas props a través de múltiples niveles de componentes intermedios que no los necesitan, solo para llegar a componentes hijos que sí los requieren.

Ejemplo visual de props drilling:

function App() {
  const [user, setUser] = useState(null); // Estado que necesitan componentes profundos

  return (
    <Layout user={user}> {/* Layout no usa user, solo lo pasa */}
      <Header user={user}> {/* Header no usa user */}
        <Navbar user={user} setUser={setUser} /> {/* Finalmente lo usa aquí */}
      </Header>
    </Layout>
  );
}

Problemas del props drilling:

1. Código verboso: Componentes intermedios reciben props que no usan

2. Dificultad de mantenimiento: Cambios requieren modificar múltiples niveles

3. Acoplamiento innecesario: Componentes saben de datos que no les conciernen

4. Rendimiento: Re-renders innecesarios en componentes intermedios

Soluciones: Context API vs Estado Global

1. React Context (la solución del ejemplo)

// Creas un contexto
const UserContext = createContext();

// Provees el valor arriba en el árbol
function App() {
  const [user, setUser] = useState(null);
  
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Layout> {/* Ya no pasa props */}
        <Header>
          <Navbar /> {/* Accede directo via useContext */}
        </Header>
      </Layout>
    </UserContext.Provider>
  );
}

2. Bibliotecas de estado global (para casos más complejos)

• Redux

• Zustand

• Jotai

• Recoil

¿Cuándo usar cada enfoque?

Flujo con Estado Global vs Props Drilling

App (tiene estado) → Layout (pasa) → Header (pasa) → Navbar (usa)

App (provee contexto)
├─ Layout
├─ Header
└─ Navbar (accede directo)