Gestionar el estado en React puede complicarse al usar la herramienta inadecuada para cada caso.

El truco

// ANTES: Uso ineficaz de useState para un estado global
function App() {
  const [user, setUser] = useState(null);

  return (
    <div>
      <Profile user={user} />
      <Settings setUser={setUser} />
    </div>
  );
}

// DESPUÉS: Uso de Context para compartir estado global
const UserContext = React.createContext();

function App() {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Profile />
      <Settings />
    </UserContext.Provider>
  );
}

function Profile() {
  const { user } = useContext(UserContext);
  return <div>{user ? user.name : 'No user logged in'}</div>;
}

function Settings() {
  const { setUser } = useContext(UserContext);
  return <button onClick={() => setUser({ name: 'John' })}>Login</button>;
}

// OPCIONAL: Uso de Zustand para un estado más complejo
import create from 'zustand';

const useUserStore = create(set => ({
  user: null,
  setUser: (user) => set({ user })
}));

function App() {
  const { user, setUser } = useUserStore();
  
  return (
    <div>
      <Profile />
      <Settings />
    </div>
  );
}

Usa useState para estados locales simples. Cuando necesites compartir el estado entre múltiples componentes, utiliza Context para evitar el “prop drilling”. Si tu aplicación requiere un estado más complejo o escalable, Zustand proporciona una API más potente sin la sobrecarga de Redux.

Ajustar la herramienta al problema es clave para mejorar la eficiencia y mantenibilidad de tu código en React.