React: Conheça o Poder dos Hooks \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 14 Min 04 Seg Tempo restante da oferta: 15 14 04 [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) React: Conheça o Poder dos Hooks [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # React: Conheça o Poder dos Hooks Conheça o que os React Hooks podem fazer e como eles vão facilitar o processo de desenvolvimento da sua próxima aplicação. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155108/React-Hooks.png) Olá Web Developers! Vamos conhecer o poder dos Hooks do React. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ## O que são React Hooks? Até a versão `16.7` era necessário criar classes para utilizar todas as funcionalidades do React em um componente, como estado e lifecycle. Era possível criar componentes a partir de funções, mas esses componentes apenas recebiam propriedades, não possuindo lifecycles, estados e outras funcionalidades do React. Os `Hooks` foram introduzidos na versão `16.8`, e nos permitem utilizar vários recursos do `React` dentro de funções de forma bem simples. ## Por que usar Hooks? Os `Hooks` nos ajudam a organizar a lógica que será usada em um componente. Podemos até criar nossos próprios `Hooks` para reutilizar a lógica em vários componentes. A própria comunidade está criando `Hooks` muito interessantes que podemos utilizar em nossos projetos. [ ![Material UI - Componentes de Layout](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/material-ui.svg) Curso Material UI - Componentes de Layout Conhecer o curso ](https://www.treinaweb.com.br/curso/material-ui-componentes-de-layout) ## Hooks Vamos conhecer os dois principais `Hooks`, `useState` e `useEffect`. ### useState O `useState` nos permite criar estados em um componente criado a partir de uma função, assim como o `state` presente em componentes criados a partir de classes. Veja o exemplo da seguinte classe: ```jsx class Treinaweb extends React.Component{ constructor(props){ super(props); this.state = { nome: 'TreinaWeb' } } render(){ return { {this.state.nome} this.setState({nome: 'React'})} >CLICK } } } ``` Com os `Hooks` nós teremos o seguinte código: ```jsx function Treinaweb (props){ const [nome, setNome] = useState('TreinaWeb'); render(){ return { {nome} setNome('React')} >CLICK } } } ``` Bem menos código, não é mesmo? Vamos entender o que o `useState()` está fazendo. O `useState()` cria uma variável que controlará o estado do componente. Se quiser outra variável execute outro `useState()`. Para este `Hook` nós passamos o valor inicial do estado, em nosso exemplo, a `String` “TreinaWeb”. Como retorno temos a variável com o valor do estado, que demos o nome de `nome`, e uma função que serve unicamente para atualizar o valor desta variável, que demos o nome de `setNome`. Veja que no clique do botão apenas chamamos esta função `setNome()`, passando o novo valor. Por estar tudo declarado dentro da própria função, não temos mais a necessidade de utilizar o `this`, que pode ser complicado de ser compreendido no JavaScript para iniciantes, causando erros no código. ### useEffect O `useEffect` é um `Hook` que serve para lidar com os efeitos. Podemos usá-los como os lifeCycles `componentDidMount`, `componentDidUpdate` e `componentWillUnmount`. Imagine que a gente tenha uma API que nos retorna uma lista de produtos baseado no nome que passarmos. ```jsx function Treinaweb (props){ const [produto, setProduto] = useState('Leite'); useEffect(() => { Produtos.buscar(produto); }) render(){ return { {produto} setProduto('Chocolate')} >CLICK } } } ``` O `useEffect()` recebe como primeiro parâmetro uma função que será executada assim que o componente renderizar. Então é um ótimo lugar para fazer requisições. Dessa maneira como escrevemos, a função passada ao `useEffect()` será executada sempre que o componente for atualizado. [ ![React Native - Armazenamento de arquivos com Firebase Storage](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Curso React Native - Armazenamento de arquivos com Firebase Storage Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-armazenamento-de-arquivos-com-firebase-storage) A beleza deste `Hook` é que podemos definir facilmente quando queremos que esta função seja executada novamente. Basta passar como segundo parâmetro ao `useEffect()` um `Array` com as variáveis que controlarão esse `Hook`. Vamos supor que queremos que a função seja executada apenas quando a variável `produto` for alterada. Ficaria assim: ```jsx useEffect(() => { Produtos.buscar(produto); }, [produto]) ``` E se quisermos que a função seja executada apenas uma vez, que é quando o componente é inserido na tela, basta passar um `Array` vazio. ```jsx useEffect(() => { Produtos.buscar(produto); }, []) ``` Você pode executar quantos `useEffects()` quiser, o que nos dá mais controle sobre o que e quando algo deve ser executado. ## Reutilização de Hooks Podemos criar nossos próprios `Hooks`. Basta criar uma função que utilize outros `Hooks` e retorne algum valor. Assim poderemos ter uma lógica fora dos componentes e reutilizá-la onde quisermos. Essas funções também devem ter seu nome iniciado com `use`. O site [https://usehooks.com/](https://usehooks.com/ "https://usehooks.com/") possui vários exemplos de `Hooks` interessantes que podem ser muito úteis em seu projeto, como carregar imagens apenas se estiverem visíveis na tela, criar funcionalidade de desfazer, criar atalhos de teclado, etc. Também é uma ótima fonte para entender melhor os `Hooks` na prática, vendo os códigos disponíveis. Os `Hooks` nos permitem trabalhar de forma limpa e simples no React, nos dando um grande poder. Com ajuda da comunidade estamos vendo várias possibilidades interessantes. Já criou um `Hook`? Compartilhe aqui com a gente pelos comentários! - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #ReactJS ](https://www.treinaweb.com.br/blog/tag/reactjs) - [ #React Hooks ](https://www.treinaweb.com.br/blog/tag/react-hooks) - [ #O que são React Hooks ](https://www.treinaweb.com.br/blog/tag/o-que-sao-react-hooks) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## 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/2017/11/06145813/react-16-400x280.jpg) [ Padrões de Projeto ](https://www.treinaweb.com.br/blog/categoria/padroes-de-projeto) 4 anos atrás ## [ Boas práticas para o React ](https://www.treinaweb.com.br/blog/boas-praticas-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. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/instalacao-do-vs-code-no-windows-linux-e-macos-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - O que é e por que você deve usar? ](https://www.treinaweb.com.br/blog/vs-code-o-que-e-e-por-que-voce-deve-usar) O VS Code é um dos editores de código mais utilizados no mundo. Conheça melhor essa ferramenta e entenda o motivo de sua popularidade. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/04133725/novo-painel-treinaweb-ava-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ O que há de novo na plataforma da TreinaWeb? Conheça as novas funcionalidades! ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-na-plataforma-da-treinaweb-conheca-as-novas-funcionalidades) Venha conhecer as novas funcionalidades da nova plataforma de ensino da TreinaWeb e aprenda dicas para aproveitá-la melhor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/BFF-400x280.jpg) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 4 anos atrás ## [ O que é BFF? ](https://www.treinaweb.com.br/blog/o-que-e-bff) Conheça neste artigo o pattern arquitetural BFF (Backend For Frontend). Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01133925/javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que se pode fazer com JavaScript hoje em dia? ](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia) Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/06145840/GANHOS-RECORRENTES-400x280.png) [ Design ](https://www.treinaweb.com.br/blog/categoria/design) 8 anos atrás ## [ Como ter ganhos recorrentes sendo um profissional freelancer ](https://www.treinaweb.com.br/blog/como-ter-ganhos-recorrentes-sendo-um-profissional-freelancer) Neste artigo, convido você a explorar 6 possibilidades de ganhos que vão além daquelas que já conhecemos e que irão te render uma graninha todo mês. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/11144157/NETWORKING-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ Como melhorar seu networking na área de TI ](https://www.treinaweb.com.br/blog/como-melhorar-seu-networking-na-area-de-ti) Veja neste artigo algumas dicas para melhorar seu networking e alcançar melhores resultados na sua carreira. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/01105921/0-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 7 anos atrás ## [ Como crescer no Front-End? ](https://www.treinaweb.com.br/blog/como-crescer-no-front-end) Veja várias dicas para alavancar a sua carreira como Desenvolvedor Front-End Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/05201832/capa-erros-vagas-400x280.jpg) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 9 anos atrás ## [ Erros que podem estar te impedindo de conseguir a tão sonhada vaga ](https://www.treinaweb.com.br/blog/erros-que-podem-estar-te-impedindo-de-conseguir-a-tao-sonhada-vaga) Que o mercado de TI é super aquecido, já sabemos. Mas você sabe no que precisa se atentar para conseguir a vaga que tanto deseja? Veja nesse artigo se você não está cometendo alguns desses erros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/react-17-conheca-o-que-vai-mudar-no-jsx-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ React 17 - Conheça o que vai mudar no JSX ](https://www.treinaweb.com.br/blog/react-17-conheca-o-que-vai-mudar-no-jsx) Veja o que teremos de diferente no JSX a partir do React 17 e como isso irá influenciar suas aplicações daqui para frente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/EXECUTAR-CODIGO-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Como instalar e executar o React ](https://www.treinaweb.com.br/blog/como-instalar-e-executar-o-react) Veja neste artigo como instalar e executar o React, então confira neste artigo como instalar o React por CDN (Link) e CLI (Linha de comando) 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) 7 anos atrás ## [ Conheça o React, biblioteca para desenvolvimento Web ](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web) Veja neste artigo o que é o React, biblioteca JavaScript para desenvolvimento web. 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 **15h 14min 04s** - 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