Clean Code: Escrevendo Código Limpo em Aplicações React

Resumo

Clean Code é um conjunto de princípios e boas práticas que visam tornar o código mais legível, manutenível e sustentável a longo prazo. Neste artigo, vamos explorar os fundamentos do Clean Code e como aplicá-los no contexto do desenvolvimento com React, cobrindo desde a estruturação de componentes até o gerenciamento de estado e nomeação de variáveis.

Introdução

Desenvolver software vai muito além de simplesmente “fazer funcionar”. À medida que aplicações crescem, a clareza e a organização do código tornam-se cruciais para garantir produtividade da equipe, facilidade de manutenção e redução de bugs. O conceito de Clean Code, popularizado por Robert C. Martin (Uncle Bob), defende exatamente isso: código que funciona e é fácil de entender, modificar e evoluir.

No ecossistema React — amplamente usado para construir interfaces modernas — o Clean Code não é apenas útil, mas essencial. Componentes reaproveitáveis, estados distribuídos, e a lógica entrelaçada com JSX tornam a disciplina de escrever código limpo um diferencial.

Fundamentos do Clean Code

Alguns dos princípios centrais de Clean Code são:

Nomeação clara e descritiva
Funções pequenas e com responsabilidade única
Evitar duplicação
Coesão e baixo acoplamento
Comentários somente quando necessários
Código autoexplicativo

Aplicando Clean Code no React

1. Componentes Pequenos e Coesos

Evite componentes monolíticos. Quebre grandes blocos em partes menores e reutilizáveis.

❌ Exemplo ruim:

const Dashboard = () => {
return (
  <div>
    <h1>Bem-vindo</h1>
    <input type="text" onChange={...} />
    <button onClick={...}>Salvar</button>
    {/* Vários elementos e lógica em um único componente */}
  </div>
);
};

✅ Exemplo limpo:

const Dashboard = () => {
return (
  <div>
    <Header />
    <UserForm />
    <SaveButton />
  </div>
);
};

2. Nomeação Significativa

Nomes devem expressar a intenção da variável, função ou componente.

❌

const x = () => {
return <Btn onClick={y}>OK</Btn>;
};

✅

const handleSaveUser = () => {
return <Button onClick={handleSaveUser}>Salvar</Button>;
};

3. Evite Comentários Desnecessários

Comentários devem complementar o entendimento, não substituir nomes ruins.

❌

jsx
CopyEdit
// Função que envia o formulário
function f1() { ... }

✅

jsx
CopyEdit
function submitContactForm() { ... }

4. Separação de Preocupações

Separe responsabilidades em arquivos ou diretórios distintos: componentes, hooks, serviços, utilitários, etc.

src/
├── components/
│   └── UserForm.jsx
├── hooks/
│   └── useFormValidation.js
├── services/
│   └── userService.js
├── utils/
│   └── formatDate.js

5. Hooks Customizados para Abstração

Quando lógica de estado ou efeitos colaterais se repetem, encapsule em hooks.

✅ Exemplo:

// hooks/useWindowSize.js
import { useState, useEffect } from 'react';

export function useWindowSize() {
const [size, setSize] = useState([window.innerWidth, window.innerHeight]);

useEffect(() => {
  const handleResize = () => setSize([window.innerWidth, window.innerHeight]);
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

return size;
}

6. Evite Código Morto e Complexidade Desnecessária

Apague variáveis não utilizadas, lógicas que não são mais necessárias e deixe o código o mais enxuto possível.

❌

const [data, setData] = useState(null);
// mas data nunca é usada

✅

Remova ou reintroduza apenas quando necessário.

7. Tratamento de Erros de Forma Clara

Não ignore erros ou deixe blocos try/catch sem propósito.

✅

try {
const response = await userService.saveUser(userData);
alert("Usuário salvo!");
} catch (error) {
console.error("Erro ao salvar usuário:", error);
alert("Erro ao salvar!");
}

Exemplo Prático

Imagine um formulário de cadastro de usuário.

Estrutura limpa:

// components/UserForm.jsx
import { useState } from 'react';
import { saveUser } from '../services/userService';

export const UserForm = () => {
const [name, setName] = useState('');

const handleSubmit = async () => {
  try {
    await saveUser({ name });
    alert('Usuário salvo!');
  } catch (e) {
    alert('Erro ao salvar usuário.');
  }
};

return (
  <form onSubmit={e => { e.preventDefault(); handleSubmit(); }}>
    <input value={name} onChange={e => setName(e.target.value)} placeholder="Nome" />
    <button type="submit">Salvar</button>
  </form>
);
};
js
CopyEdit
// services/userService.js
export async function saveUser(user) {
const response = await fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify(user),
  headers: { 'Content-Type': 'application/json' }
});

if (!response.ok) throw new Error('Erro ao salvar');

return response.json();
}

Conclusão

Aplicar Clean Code em React é uma prática que exige disciplina, mas traz ganhos enormes em legibilidade, manutenção e escalabilidade da aplicação. Escrever código limpo não é sobre “gastar mais tempo”, e sim sobre economizar o tempo de todos que vão manter o projeto no futuro — inclusive você mesmo.

Boas práticas como nomeação clara, componentes coesos, abstrações via hooks, separação por responsabilidade e código autoexplicativo são elementos-chave em qualquer projeto React profissional.

Referências

Robert C. Martin, Clean Code: A Handbook of Agile Software Craftsmanship
Kent C. Dodds – https://kentcdodds.com/
React Docs – https://react.dev/
Clean Code concepts in React – https://github.com/ryanmcdermott/clean-code-javascript