10 Boas Práticas ao Escrever Código em React
Escrever código que funciona é apenas o começo. Em React — como em qualquer tecnologia — há uma grande diferença entre fazer algo funcionar e fazer do jeito certo, de forma limpa, eficiente e fácil de manter. Para te ajudar a evoluir como desenvolvedor(a) React, separei 10 boas práticas essenciais que vão melhorar significativamente seu código.
1. Separe seus componentes em arquivos
Manter cada componente em seu próprio arquivo facilita a leitura, manutenção e escalabilidade do projeto. Um arquivo = um componente. Isso organiza sua aplicação desde o início.
Exemplo:
Header.jsx, Footer.jsx, CardProduto.jsx ao invés de tudo no App.jsx.
2. Nomeie componentes com letras maiúsculas
React diferencia componentes personalizados de elementos HTML pelo uso de maiúsculas. Sempre nomeie seus componentes com a primeira letra maiúscula.
jsx
CopyEdit
function MeuBotao() {
return <button>Click</button>;
}
3. Use props de forma clara e tipada (se possível)
Utilize props de maneira clara e documentada. Se estiver usando TypeScript, tipar props ajuda a evitar erros. Em JavaScript, você pode usar bibliotecas como PropTypes para validar as props.
jsx
CopyEdit
MeuBotao.propTypes = {
texto: PropTypes.string.isRequired
};
4. Prefira componentes funcionais e hooks
Desde a introdução dos hooks em 2018, os componentes funcionais se tornaram o padrão moderno. Eles são mais simples, legíveis e poderosos.
jsx
CopyEdit
function Contador() {
const [contador, setContador] = useState(0);
return <p>{contador}</p>;
}
5. Evite lógica pesada diretamente no JSX
Deixe o JSX limpo. Se precisar de lógica, mova para fora da parte de retorno ou crie funções auxiliares.
Ruim:
jsx
CopyEdit
return <div>{itens.length > 0 ? itens.map(...) : 'Sem itens'}</div>;
Melhor:
jsx
CopyEdit
const renderItens = () => {
if (itens.length === 0) return 'Sem itens';
return itens.map(...);
};
return <div>{renderItens()}</div>;
6. Use keys únicas ao renderizar listas
Quando mapear listas de componentes, sempre use a prop key com um valor único e estável (nunca o índice do array, se possível).
jsx
CopyEdit
{usuarios.map((user) => (
<Usuario key={user.id} nome={user.nome} />
))}
7. Mantenha componentes pequenos e focados
Componentes devem fazer uma coisa só. Se seu componente está com mais de 100 linhas, provavelmente ele pode ser dividido em partes menores.
8. Use CSS modular ou styled-components
Evite arquivos CSS gigantes. Use CSS Modules, styled-components ou outra abordagem de CSS-in-JS para manter o estilo encapsulado e organizado por componente.
jsx
CopyEdit
import styles from './Botao.module.css';
<button className={styles.botao}>Clique</button>
9. Organize a estrutura de pastas
Tenha uma estrutura clara e padronizada:
bash
CopyEdit
/src
/components
/Header
index.jsx
styles.module.css
Essa organização facilita encontrar e manter o código com o tempo.
10. Use o DevTools do React
A extensão React Developer Tools para Chrome e Firefox é essencial. Ela permite inspecionar componentes, props, estado e entender o que está sendo renderizado.
Essas boas práticas não são apenas "dicas" — são hábitos que separam um código bagunçado de um projeto profissional, escalável e de fácil manutenção. Comece aplicando uma por uma e, com o tempo, isso se tornará parte natural do seu processo de desenvolvimento em React.
E lembre-se: código limpo não é apenas para os outros entenderem, mas para você mesmo conseguir voltar daqui a seis meses e ainda saber o que está acontecendo!
