Boas práticas para o React \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 04 Horas 03 Min 51 Seg Tempo restante da oferta: 04 03 51 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Boas práticas para o React [ Padrões de Projeto ](https://www.treinaweb.com.br/blog/categoria/padroes-de-projeto) [ React ](https://www.treinaweb.com.br/blog/categoria/react) # Boas práticas para o React Veja neste artigo algumas das dicas e boas práticas para utilizar em uma aplicação React e tenha um código mais limpo na sua aplicação. [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16.jpg) Quando falamos sobre boas práticas para o React, com certeza não estamos falando em uma prática recomendada universalmente que você possa aplicar a todos os negócios e aplicativos, mas para manter um aplicativo produtivo e flexível temos que seguir alguma boa prática para ter um bom código. Neste artigo, vou esclarecer algumas regras que podem ser muito úteis ao criar sua aplicação utilizando React. É bom ter o mínimo de conhecimento sobre a biblioteca React então você pôde conhecer mais sobre no artigo: [Conheça o React, biblioteca para desenvolvimeto Web](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web "Conheça o React, biblioteca para desenvolvimeto Web") [ ![React - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-fundamentos) ## Componentes funcionais Existem duas formas de criarmos componentes React. Podemos criar via componentes de função e componentes de classe. A utilização de componentes criados com classe existe uma certa complexidade, como a necessidade de um breve conhecimento em POO ([programação orientado a objetos](https://www.treinaweb.com.br/blog/os-pilares-da-orientacao-a-objetos "programação orientado a objetos")) e, também, pela sintaxe muito maior comparado a componentes criados com função, visto que um componente criado com função é simplesmente uma função que aceita `props` (objeto) como um argumento e retorna um elemento React ([JSX](https://www.treinaweb.com.br/blog/o-que-e-jsx "JSX")). Os componentes funcionais têm uma sintaxe muito simples. Você não precisa se preocupar com construtores e métodos de ciclo de vida. Sendo assim eles têm menos caracteres sem perder a legibilidade e você pode expressar a mesma lógica. Segue um breve exemplo abaixo: ```javascript // má prática class Counter extends React.Component{ state = { counter:0 } constructor(props){ super(props) this.handleClick = this.handleClick.bind(this) } handleClick(){ this.setState({counter:this.state.counter + 1}) } render(){ return ( counter: {this.state.counter} Increment ) } } // boa prática function Counter(){ const [counter, setCounter] = useState(0) const handleClick = ()=>setCounter(counter +1) return ( counter: {counter} Increment ) } ``` Note que em ambos os componentes temos as mesmas funcionalidades e comportamentos, porém a sintaxe, no componente de classe, é um pouco maior e quem não tem um conhecimento em POO pode ficar um pouco perdido de como utilizá-lo. Por isso, é uma boa prática criar componentes com funções em vez de classe. ## Organização de funções auxiliares Uma das boas práticas para o React é, não definir funções auxiliares dentro do próprio componente. O melhor lugar para definir funções auxiliares, e até mesmo a lógica do componente ou tela, é em hooks personalizados ou funções separadas do componente. Você deve passar os valores do estado ou das funções auxiliares no retorno do hook e pode utilizá-lo desestruturando os dados do retorno do hook, para ter uma sintaxe um pouco menor. ```javascript // má pratica function IndexComponent(props){ function paseInt(value){ return Number(value) } return ( {parseInt(props.data)} ) } // boa prática function useIndex(){ function paseInt(value){ return Number(value) } return {parseInt} } function IndexComponent(props){ const {parseInt} = useIndex() return ( {parseInt(props.data)} ) } ``` [ ![Next.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/next-js.svg) Curso Next.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/nextjs-fundamentos) ## Desestruturação das props Como descrevi acima, componentes criados com funções são funções que recebem no parâmetro as `props` e retornam elemento React (JSX). Como as `props` são objetos nós podemos utilizar da desestruturação para ter um código mais limpo. ```javascript // má prática function InputComponent(props){ return ( {props.text} ) } // boa prática function InputComponent({onClick,text}){ return ( {text} ) } ``` ### Quantidade de props Outra pergunta muito comum é: “quantas propriedades passar em um componente?”. A resposta é muito simples, quanto mais `props` um componente recebe, mais motivos ele tem para se renderizar novamente, então você deve dar menos propriedades a um componente conforme for possível. ## Prefira passar objetos em props É muito comum criarmos componentes para passar propriedades e acabamos passando mais que o necessário. Então, para evitar isso, em vez de passar propriedades que aceitam valores primitivos, como string e number, devemos passar objeto contendo todos os valores necessários para formar o componente. Fazendo isso, iremos seguir as boas práticas para o React ```javascript // má prática // boa prática ``` Isso ajuda a diminuir o tamanho do código, visto que o próprio componente já deve tratar os dados internamente no componente. Outra dica é utilizar [TypeScript](https://www.treinaweb.com.br/blog/precisamos-falar-sobre-o-typescript "Typescript") para facilitar a utilização de objetos nas propriedades do componente, visto que você consegue utilizar a [tipagem](https://www.treinaweb.com.br/blog/tipagem-no-typescript "tipagem") para não cometer erros. ## Evite ternários aninhados no JSX Após o primeiro nível utilizando ternário no meio do JSX torna-se difícil ler os operadores, portanto, evite ao máximo possível o uso de operadores ternários aninhados. Como opção para seguir boas práticas para o React, você pode utilizar as tomadas de decisão para melhorar a legibilidade do código. ```javascript // má prática function Index(){ const {data} = useIndex() return data ? ( data.length === 0 ? ( Nenhum elemento disponível ) : ( {data.map(({ nome }, i) => ( {nome} ))} ) ) : ( ); } // boa prática function Callback({data, render}){ if(data){ if(data.length === 0){ return "Nenhum elemento disponível" } return render(data) } return } function Index(){ const {data} = useIndex() ( {data.map(({ nome }, i) => ( {nome} ))} )} /> } ``` ## Mapeamento de listas em componentes No exemplo anterior utilizamos o método `map` para poder listar os valores que vieram de uma [API](https://www.treinaweb.com.br/blog/o-que-e-uma-api "api") de exemplo. Fazer um loop sobre os itens da lista é um trabalho comum em nosso dia a dia e nós usamos o método `map` para esse propósito. Para listarmos tudo que é necessário sempre devemos criar um componente para fazer essa tarefa, visto que o método `map` cria alguns problemas de legibilidade. Se a propriedade for longa ou complicada, use um único mapeamento por componente. ```javascript // má prática function Index(){ const {data} = useIndex() ( {data.map(({ nome }, i) => ( {nome} ))} )} /> } // boa prática function Index(){ const {data} = useIndex() ( )} /> } function PageName({data}){ return ( {data.map(({ nome }, i) => ( {nome} ))} ) } ``` [ ![Desenvolvedor React](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Formação Desenvolvedor React Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-react) ## Use o caminho absoluto Nos exemplos acima, criamos diversas funções para separar lógica e componentes, mas sabemos que quando estamos desenvolvendo uma tela podemos ter dezenas de importações de funções, objetos e componentes que vão ser necessários para finalizar a criação de uma tela. Para ter uma melhor organização de código é interessante utilizar a importação absoluta de cada elemento. ```javascript import InputComponent from '@src/component/input/InputComponent' ``` Isso ajuda a ter um código mais limpo e caso você esteja utilizando TypeScript você pode configurar caminhos para ter a importação muito menor. Outras soluções de importações que podemos utilizar é a seguinte. Imagine que temos uma importação comprida para acessar os nossos componentes como no exemplo abaixo: `import InputComponent from '@components/Input/InputComponent/InputComponent'` Mas o que realmente gostaria de escrever é o seguinte: `import InputComponent from '@components/Input/InputComponent'` Para resolver, você pode criar um `index.js` dentro da pasta `InputComponent`. ![Estrutura de pastas componente react](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/Capturar-300x114.png) ## Conclusão Hoje tentamos entender da melhor forma possível como podemos ter um código mais limpo e organizado utilizando o React então vimos desde a teoria até uma pequena olhada em como funciona o código. E ter um padrão que muda nossa forma de desenvolver é uma das mágicas dessa área maravilhosa de desenvolvimento. Sempre teremos algo novo para ver, estudar, testar e aplicar no nosso dia a dia! Agora, no seu projeto pessoal ou profissional, você terá mais confiança em construir seu código. Caso queira aprender mais sobre o React, saiba que aqui na [TreinaWeb](https://www.treinaweb.com.br/) nós temos a formação [Desenvolvedor React - Funcional](https://www.treinaweb.com.br/formacao/desenvolvedor-react-funcional) que possui **12h40 de vídeo** e um total de **55 exercícios**. Veja quais são os cursos que fazem parte desta formação: - React - Fundamentos - React - Dominando Componentes Funcionais - React - Despertando o Poder dos Hooks - React - Conhecendo o React Router - React - Estilização com Emotion (Styled Components) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #TypeScript ](https://www.treinaweb.com.br/blog/tag/typescript) - [ #react ](https://www.treinaweb.com.br/blog/tag/react) - [ #Boas práticas para o React ](https://www.treinaweb.com.br/blog/tag/boas-praticas-para-o-react) Autor ![Ariel Sardinha](//secure.gravatar.com/avatar/d0b89ee09026eb2b9e26f286c04eba03?d=mm) ## Ariel Sardinha Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. [arielsardinha](https://www.linkedin.com/in/ariel-sardinha/) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/01/NOVIDADES-REACT-19-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 2 anos atrás ## [ 4 Novidades do React 19 ](https://www.treinaweb.com.br/blog/4-novidades-do-react-19) Descubra 4 novidades do React 19, incluindo novos hooks, otimizações de performance e uso prático das Actions para formulários. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/REACT-ROUTER-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Gerenciamento de Rotas no React com React Router ](https://www.treinaweb.com.br/blog/gerenciamento-de-rotas-no-react-com-react-router) Neste artigo vamos abordar um conceito importante dentro de aplicações com o React, O gerenciamento de Rotas no React com React Router. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/CICLO-VIDA-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Ciclo de vida de componentes funcionais no React ](https://www.treinaweb.com.br/blog/ciclo-de-vida-de-componentes-funcionais-no-react) Como funciona o ciclo de vida de componentes funcionais no React para manipular a inicialização, atualização e limpeza de um componente React Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/ESCOPO-CONTEXTO-JS-2-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 4 anos atrás ## [ Contexto e Escopo no JavaScript ](https://www.treinaweb.com.br/blog/contexto-e-escopo-no-javascript) O que é contexto e escopo no JavaScript e o que o escopo interfere no contexto. Veremos o que é this e o que o contexto tem haver com ele Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/23215528/capa-boas-praticas-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Boas práticas de programação para iniciantes ](https://www.treinaweb.com.br/blog/boas-praticas-de-programacao-para-iniciantes) Veja neste artigo algumas boas práticas que você deve adotar enquanto escreve seu código. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/conhecendo-o-codeigniter-framework-php-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 6 anos atrás ## [ Conhecendo o CodeIgniter, framework PHP ](https://www.treinaweb.com.br/blog/conhecendo-o-codeigniter-framework-php) Veremos neste artigo o que é o CodeIgniter, um dos principais frameworks PHP do mercado, e suas principais características. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Trabalhando com funções na Golang ](https://www.treinaweb.com.br/blog/trabalhando-com-funcoes-na-golang) Neste artigo vamos aprender sobre as funções na Golang. Veremos o que são, qual a sua importância em nossos programas e como utilizá-las. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ JavaScript - Comandos do Console ](https://www.treinaweb.com.br/blog/javascript-comandos-do-console) Conheça os comandos do console do navegador e domine essa ferramenta para melhorar seus testes ou caça aos bugs do seu JavaScript! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/13164211/JAVASCRIPT-COISAS-ESTRANHAS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Entendendo as partes estranhas ](https://www.treinaweb.com.br/blog/javascript-entendendo-as-partes-estranhas) Conheça o motivo por trás de vários comportamentos considerados estranhos que o JavaScript possui. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Ordenação-de-Cores-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Ordenando Elementos por Cores ](https://www.treinaweb.com.br/blog/javascript-ordenando-elementos-por-cores) Aprenda a ordenar cores e fazer conversões entre os formatos RGB, Hexadecimal e HSL usando JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/27155937/js-symbol-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 8 anos atrás ## [ JavaScript: você sabe o que são e por que usar Symbols? ](https://www.treinaweb.com.br/blog/javascript-voce-sabe-o-que-sao-e-por-que-usar-symbols) Descubra a utilidade dos Symbols no JavaScript, novo tipo primitivo introduzido no ES2015. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **04h 03min 51s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58