Escrever código que funciona é fácil. Escrever código que outros humanos (e você do futuro) conseguem ler e manter é difícil.
No React, é muito fácil criar "God Components" — componentes de 500 linhas que fazem tudo. Vamos aplicar Clean Code para resolver isso.
1. Single Responsibility Principle (SRP)
Um componente deve fazer apenas uma coisa.
Se o seu componente UserProfile:
- Busca dados da API.
- Formata a data.
- Renderiza o Card.
- Gerencia o Modal de Edição.
Ele violou o SRP.
Solução:
- Use Custom Hooks para lógica (
useUserProfile). - Separe sub-componentes (
UserCard,EditUserModal). - Funções utilitárias para formatação (
formatDate).
2. Don't Repeat Yourself (DRY) vs WET
DRY é bom, mas cuidado. Às vezes, abstrair cedo demais causa acoplamento desnecessário. No React, preferimos Composição sobre Herança.
Em vez de criar um Button que aceita 50 props (hasIcon, isLoading, isRed, isBig...), crie componentes compostos ou variantes claras.
3. Nomes Significativos
-
Ruim:
const [d, setD] = useState([]) -
Bom:
const [users, setUsers] = useState<User[]>([]) -
Ruim:
handleCheck() -
Bom:
handleSubmitForm()ouonDeleteClick()
4. O Retorno Antecipado (Guard Clauses)
Evite o "Hadouken" de indentação (vários ifs aninhados).
// Ruim
if (user) {
if (!loading) {
return <Component />
}
}
// Bom
if (loading) return <Spinner />;
if (!user) return <LoginPrompt />;
return <Component />;
Conclusão
Clean Code no frontend não é sobre regras rígidas, é sobre intencionalidade. Cada linha de código deve ter um propósito claro e óbvio. Leia seu código como se fosse um livro.