Frontend Implementation

🛠️ Diretrizes de Implementação

1. Exportação (Exports)

• PROIBIDO: Nunca utilize export default. Utilize apenas Named Exports.

2. Definição de Componentes e Funções

• PROIBIDO: Evite definir componentes como constantes (const MyComponent = ...).
• OBRIGATÓRIO: Use a sintaxe de declaração de função tradicional (export function Component()).

3. Sincronização e Efeitos (React Hooks)

• PROIBIDO: Nunca utilizar useEffect para lógica que pode ser resolvida com estado derivado ou manipuladores de eventos. Mantenha o fluxo de dados síncrono sempre que possível.

4. Tipagem de Dados (TypeScript)

• PROIBIDO: Uso de any. Utilize unknown ou interfaces estritas.
• IMPORTAÇÃO DE TIPOS: Sempre utilize a sintaxe import { type ... }.

5. Clean Code & Dead Code

• OBRIGATÓRIO: Remova qualquer variável, função, comentário de log ou importação não utilizada. O código deve estar limpo e pronto para produção.

📝 Exemplo de Estrutura Completa

1. Custom Hook (useUser.ts)

import { useState } from 'react';
import { type User } from './types';

export function useUser() {
  const [user, setUser] = useState<User | null>(null);

  function refreshUser() {
    // Lógica de atualização
    console.log("Usuário atualizado");
  }

  return { user, refreshUser };
}