Mantener el estado entre páginas en React

 ¿Es verdad que en React existe un hook de estado global que sirve para mantener el estado entre cambios de página?

Muy buena observación, Gabriel 👌. La respuesta corta es: React no trae un hook de estado global por defecto. Los hooks nativos (useState, useReducer, useEffect, etc.) manejan estado local al componente. Si cambiás de página (por ejemplo, con React Router), ese estado se pierde porque el componente se desmonta.

🔹 Entonces, ¿cómo se logra un estado global en React?

React ofrece varias formas de compartir estado entre páginas o componentes:

1. Context API (useContext)

   • Es lo más cercano a un “estado global” nativo.

   • Podés crear un Context y envolver tu aplicación en un Provider.

   • Ejemplo:

     jsx

     const AuthContext = React.createContext();
     
     function AuthProvider({ children }) {
       const [user, setUser] = React.useState(null);
       return (
         <AuthContext.Provider value={{ user, setUser }}>
           {children}
         </AuthContext.Provider>
       );
     }
     
     function useAuth() {
       return React.useContext(AuthContext);
     }
     

   👉 Con esto, cualquier componente (en cualquier página) puede acceder a user y setUser.

2. Librerías de estado global

   • Redux: clásico, muy usado en proyectos grandes.

   • Zustand: más ligero y moderno, con API simple basada en hooks.

   • Jotai / Recoil: alternativas más declarativas y reactivas. 👉 Estas librerías permiten mantener estado global persistente entre páginas sin necesidad de pasar props.

3. Persistencia en almacenamiento

   • Si querés que el estado sobreviva incluso a un refresh, podés sincronizarlo con localStorage o sessionStorage.

   • Ejemplo:

     jsx

     const [theme, setTheme] = React.useState(
       () => localStorage.getItem("theme") || "light"
     );
     
     React.useEffect(() => {
       localStorage.setItem("theme", theme);
     }, [theme]);
     

🔹 Conclusión

• No existe un hook nativo de estado global en React.

• Lo más cercano es Context API (useContext + useState/useReducer).

• Para proyectos grandes o complejos, conviene usar librerías como Redux, Zustand o Recoil.

• Si querés persistencia entre refreshes, combinás estado global con localStorage.

✨ En resumen: React te da las piezas (useContext, useReducer), pero el “estado global” lo tenés que armar vos o usar una librería.

¿Querés que te arme un ejemplo práctico con Zustand para que veas cómo se maneja un estado global con un hook súper simple y usable en cualquier página?