Especialização Frontend com React & TypeScript • Demonstrações Práticas Executáveis

🎯 Contexto e Objetivo Prático

Store atômica e desacoplada com Zustand, ações fortemente tipadas e persistência automática no localStorage.

💻 Código Fonte React 19 (TSX)

// authStore.ts
import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";

export interface UserSession {
  userId: string;
  name: string;
  token: string;
}

export interface AuthState {
  user: UserSession | null;
  isAuthenticated: boolean;
  login: (user: UserSession) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>()(
  persist(
    set => ({
      user: null,
      isAuthenticated: false,
      login: user => set({ user, isAuthenticated: true }),
      logout: () => set({ user: null, isAuthenticated: false })
    }),
    {
      name: "auth-session-storage",
      storage: createJSONStorage(() => localStorage)
    }
  )
);

// Componente Consumidor com Seletor Atômico (Zero re-render extra)
export function UserProfileHeader() {
  const user = useAuthStore(state => state.user);
  const logout = useAuthStore(state => state.logout);

  if (!user) return <span className="text-sm text-slate-400">Não autenticado</span>;

  return (
    <div className="flex items-center gap-3">
      <span className="text-sm font-semibold">{user.name}</span>
      <button onClick={logout} className="text-xs text-red-600 font-bold">
        Sair
      </button>
    </div>
  );
}

🖥️ Saída de Renderização Visual e Comportamento

[Header com Zustand Store]
Usuário Autenticado: Ricardo Lima
[Sair] -> Dispara logout(), limpa o estado atômico e sincroniza localStorage.