Zustand: estado global

Zustand cria um store com um hook. Qualquer componente pode ler/escrever sem Context excessivo.

import { create } from 'zustand';

const useTheme = create((set) => ({
  theme: 'dark',
  toggle: () => set((s) => ({ theme: s.theme === 'dark' ? 'light' : 'dark' })),
}));

function App() {
  const theme = useTheme((s) => s.theme);
  const toggle = useTheme((s) => s.toggle);
  return <button type="button" onClick={toggle}>Tema: {theme}</button>;
}