Aprenda REACT HOOKS em 30 minutos | Tutorial sobre Hooks

os hulks são uma peça chave das aplicações react entender como eles funcionam é fundamental para dominar essa biblioteca e elevar o nível do seu código Então nesse vídeo eu vou te mostrar os principais looks do react como eles funcionam E como você pode criar seus próprios hulks então sem mais enrolações Bora pro vídeo [Música] Então a primeira coisa que a gente precisa entender quando falamos de hulks é o que são os hulks e que problemas Eles vieram solucionar os hulks são funções que permitem que os fungos não compõem o react tem o acesso ao controle

de estado do react e outros recursos dentro do react então para quem não sabe antigamente nas versões anteriores do react a gente definia nossos componentes através de classes e nessas classes a gente poderia colocar alguns métodos tá alguns métodos de fogo onde a gente poderia fazer a manipulação do Círculo de vida desse componente e também a manipulação de estado dentro do nosso componente quando o react mudou de classe componentes para funchos ou seja os componentes passaram a ser declarados em formatos de função e não mais de Classe A gente precisava de uma forma de continuar

manipulando o ciclo de vida do componente continuar manipulando o estado e outros recursos que o react oferece e os hulks vieram para resolver esse problema então a gente utiliza hooks para fazer esse controle do ciclo de vida do componente dos estados e outros recursos do react e aqui dentro da documentação do react a gente consegue achar o conceito né a definição do que são os ruins e aí nos diz assim ó os hulks permite que você use diferentes features do react dentro dos seus componentes você pode tanto utilizar os hulks biotin ou seja os que

já são oferecidos nativamente pelo react ou criar seus próprios hulks essa página tem a lista de todos os hulks que são biotin react e agora a gente vai entender esses principais rooks que são oferecidos pelo react como eles funcionam e como a gente pode criar os nossos próprios hulks também então basicamente os hulks são funções que a gente vai utilizar dentro dos nossos componentes que permitem que os nossos componentes utilizem alguns recursos que o react nos oferece e os ruins existem para basicamente três objetivos eu separei aqui três objetivos e a gente vai entender cada

um deles então primeiro é para gerenciamento de Estados e a gente já vai entender o que que isso aqui significa o segundo objetivo é para gerenciamento do ciclo de vida do componente isso aqui a gente já vai entender também e muitas vezes o ciclo de vida está conectado ao estado do componente e o terceiro objetivo é criar lógicas reutilizáveis entre os componentes Então como os hulks são funções a gente consegue extrair alguns pedaços de lógica que estão dentro do nosso componente para dentro dessas funções e permitir que vários componentes da nossa aplicação utiliza essa mesma

lógica através da utilização desses ruins então isso aqui tá muito conectado a criação de Custom hooks de hulks que a gente vai criar para utilizar dentro da nossa aplicação então agora a gente já vai entender cada um desses objetivos aqui e vamos entender com exemplos na prática e vamos entender os principais Russos que o react oferece para a gente utilizar então primeiro ponto que a gente vai olhar aqui hoje é o ponto de gerenciamentos de estado e esse conceito é fundamental para entender como react funciona e quando a gente está falando de hulks de gerenciamento

de estado existem dois hulks principais o primeiro deles é o use state e o segundo é o US contemix esses dois hulks são fornecidos pelo react né de forma Nativa para a gente utilizar nos nossos componentes e o que a gente vai focar aqui hoje eu e os States que é o Hulk mais básico dentro do react em qualquer aplicação react você vai ver pelo menos uma utilização desse Hulk Então a gente vai focar e entender como ele funciona na prática mas eu vou explicar para vocês mais ou menos como funcionaria o e os contact

então e os state permite que a gente manipule gerencia e na verdade estados do componente então estados atômicos dentro do componente e para a gente entender essa definição aqui formal a gente vai ver um exemplo porque fica muito mais fácil compreender o que que isso aqui significa então eu trouxe aqui uma aplicação Direct para a gente entender primeiro eu criei um componente meu componente se chama Counter function dentro desse componente eu tenho aqui um H2 para mostrar Um textinho um parágrafo e um botão esse meu botão toda vez que o meu usuário clicar nele eu

quero adicionar um contador Então imagina que o meu computador inicia com valor zero toda vez que o usuário clicar no botão eu quero adicionar um a esse contador então usuário clico uma vez um mais um dois três quatro vai adicionando adicionando adicionando só que toda vez que esse contador mudar de valor eu quero mostrar para o usuário qual é o valor do contador atual Quero mostrar na tela então além de mostrar o meu título e o botão eu quero mostrar qual é a contagem atual e como é que a gente faz isso dentro do react

a gente faz através do Hulk e os state porque a gente vai gerenciar um estado Então esse nosso contador é um estado é um estado do nosso componente atual só que para que toda vez que a gente atualizar computador o meu usuário veja o reflexo disso Veja isso ser mudado em tela a gente precisa usar o Hulk e os States E por que isso porque esse meu contador nada mais é que uma variável mas o react precisa saber quando essa variável mudar de valor e como é que o react vai saber isso quando a gente

usa o state que ele nos forneceu então o assistente nada mais é uma forma que a gente declarar variáveis e atualizar os valores dessas variáveis e toda vez que a gente atualiza o valor dessas variáveis a gente Avisa por react que esse valor atualizou E por que que a gente avisa para o react que o valor atualizou porque a gente precisa que o react renderiza novamente nosso componente pinte novamente a gente ele entela e quando ele pintar novamente meu componente em tela ele vai mostrar o valor atualizado da nossa variável então eu vou abrir aqui

o navegador e vai ficar claro para vocês entenderem então aqui ó contador usando o Hulk e os States toda vez que eu clicar no botão adicionar eu quero que essa Contagem aqui atualize então vou clicar aqui ó adicionar um dois três quatro cinco seis ó vocês estão vendo está funcionando ele tá refletindo em tela mas se eu tivesse feito esse contador aqui sem usar o Hulk e os state ele ia se comportar de forma diferente então vamos mostrar aqui para vocês ó Let's count not Hook então um contador sem Hulk é igual a zero toda

vez que eu clicar no incremento aqui que eu clicar no botão chamar a função incremento eu vou fazer o meu caldo ser igual a count mais um E aí esse count aqui que eu criei caldo que não foi feito com Hulk eu vou colocar aqui embaixo ó count no Hulk tá E esse aqui eu vou comentar então agora em vez de mostrar o valor do Hulk eu vou usar o valor que foi feito sem Hulk e vocês vão ver que isso aqui não vai funcionar porque que não vai funcionar porque toda vez que atualizar essa

variável react não vai saber que ela atualizou porque ele não tem como saber se eu não avisar para ele e aí ele não pinta novamente a minha tela ele não renderiza novamente e o usuário não vê essa atualização Então é isso que a gente quer dizer quando a gente fala de gerenciamento de estado porque o meu componente Guarda um estado externo e quando eu quero que ele renderize a cada mudança desse estado para refletir para o usuário a gente precisa usar esse Hulk e aqui Vocês conseguem ver que dentro desse Hulk eu tô extraindo dois

valores eu tô extraindo o valor count né e o set Country isso aqui pode ser um nome que eu quiser mas é basicamente duas variáveis que ele não retorna Ele não retorna O valor atual então isso nada mas é que valor atual e aqui é um set valor atual que seria atualizar o valor atual tá então Ele nos retorna Qual o valor e uma função para atualizar esse valor Por que que a gente tem que chamar essa função e não criar a nossa própria função não incrementar aqui direto porque lembra a gente tem que avisar

para o react que esse valor tá mudando e a gente faz isso através de set tá então quando a gente usa o certo o react sabe opa olha aqui ele tá atualizando esse valor então vou renderizar novamente então aqui ó eu posso usar o valor atual Então vou excluir esse IP aqui que eu criei e vou usar variável valor atual que eu troquei o nome ali essa variável aqui pode ter o nome que vocês quiserem tá bem não precisa secar alto não precisa ser valor atual pode ser banana pode ser maçã pode ser o que

vocês quiserem mas é padrão a gente chamar a gente dá um nome pra variável E aí a segunda o valor que a gente trai a gente coloca certo na frente que seria a função que vai atualizar que vai fazer o certo né separa o valor e o nome da variável de novo seu padrão de descrita de código react se eu voltar aqui agora para o meu navegador e clicar em adicionar ele volta a atualizar então a gente entendeu o conceito de gerenciamento de estado e como funciona o Hulk e os States na prática lembra que

eu falei para vocês que eu explicar rapidamente Como funciona o Wilson Então vou explicar e os contact nada mais é que uma forma da gente controlar estados globais então Lembra que eu falei que é gerenciar estados atômicos do componente então aqui esse é um estado desse componente que tá dentro dele tá se eu quisesse que esse componente fosse compartilhado entre vários componentes por exemplo aqui na minha tela eu quero colocar o componente do header componente do carrinho componente de uma listagem de produtos e eu quero que todos esses componentes que estão aparecendo em tela compartilhem

de um mesmo valor de uma mesma variável e toda vez que algum deles mudar essa variável o outro saiba e reflita e atualize como é que eu faria isso é através dos contextos do react mas é um conceito um pouquinho mais complexo e eu posso deixar isso para outro mas entendam basicamente que usa States é para Estados atômicos do componente Ou seja que vão estar dentro do componente e use com Tex é para fazer o gerenciamento desses estados globais que vários componentes vão estar compartilhando e outra coisa legal do usa state é que a gente

pode iniciar o nosso estado com o valor inicial né com o valor de voo então aqui eu tava inicializando como zero mas eu poderia aqui por exemplo inicializar como sem para já começar meu contador no valor 100 e se eu abrir aqui o nosso navegador a gente já vai ver ó que a contagem começou como 100 e quando eu começar a adicionar ele vai começar a partir do 100 e a gente pode criar e os States de diversos tipos então não só número mas a gente pode declarar aqui uma string por exemplo Fernanda e aqui

eu vou chamar de minha string e aqui certo minha string e eu posso mostrar essa minha string aqui em tela então nome minha string e aqui ele começa como Fernanda ou poderia mudar para vídeo do YouTube ele vai inicializar com esse valor e se eu quisesse atualizar o valor dessa minha string basta eu chamar esse sétimo string para mudar o valor dela então aqui dentro da nossa função incremento a gente poderia fazer assim ó certo minha string como Fernanda e aqui o valor do contador então o valor atual Fernanda tem Contagem vai ficar mais legal

pronto então aquele inicia como vídeo do YouTube que é o valor de fogo que eu deixei para esses trem mas quando eu clico a primeira vez ele atualiza para Fernanda tem Contagem Mas se vocês verem aqui ó o Contagem ali em cima tá como 101 mas aqui embaixo o Contagem tá como sempre por que isso porque logo em cima do 7 min string a gente tinha chamado o certo valor atual que vai atualizar a contagem só que esse certo valor atual Essas funções de sets são assim cronas então elas não executam sincronamento então quando ele

chegou aqui nessa linha para atualizar o valor de certo menstring pode ser que o valor atual ainda não tinha sido atualizado tá ele não tinha mudado E aí a minha string ficou com o valor antigo que tava dentro desse estado Só que a gente pode contornar esse comportamento se a gente quiser que ele tenha valor mais atualizado possível a gente pode passar uma função aqui para o certo meu valor atual onde eu vou pegar o prifout que seria o valor antigo e aqui eu vou passar uma função que vai retornar o prive count mais um

mas antes disso eu vou atualizar o minha string como Fernanda tem Contagem e aqui vai ser o meu pref Counting mais um e aqui basicamente em vez de eu só atualizar meu valor eu tô executando uma função antes de atualizar esse valor né tô executando algum comando para então retornar o valor atualizado desse meu valor atual e eu consigo que aquele Fernando de Contagem seja atualizado Então vou dar um relógio aqui ó Fernando aqui em Contagem 101 102 bom e antes de continuar a nossa explicação sobre Hulk eu vim te recomendar a plataforma que foi

um diferencial para minha carreira lá eu aprendi esse e vários outros assuntos do mundo do react e que me ajudou a conquistar minha primeira vaga de programação para quem não conhece a Rocket Edition é uma escola de programação e hoje a Rocket está com um plano One onde com apenas uma assinatura você consegue acesso a todos os conteúdos e todos os cursos da plataforma com trilhas extremamente completas de react reacts mentoria de carreira Internacional e muito mais e o melhor disso é que é um investimento sem risco então se você não se adaptar você tem

15 dias para pedir o seu dinheiro de volta e a gente aqui da nossa comunidade tem um cupom de desconto exclusivo então não perde tempo o link está aqui na descrição e bora continuar o vídeo o próximo ponto que a gente vai entender é o gerenciamento do ciclo de vida de um componente Então deixa eu colocar essa explicação aqui para o lado e vamos entender o que seria o ciclo de vida de um componente bom o que que é ciclo de vida ciclo de vida são as etapas que o nosso componente passa em todo momento

que ele está vivo que ele está ativo o que que seria Vivo ou ativa quando ele está aparecendo em tela então o nosso ciclo de vida de um componente é composto basicamente de três etapas três etapas principais a primeira etapa é de criação então é quando o cliente O componente foi criado pela primeira vez em tela a segunda etapa é de atualização ou seja o componente mudou o seu estado interno e foi renderizado novamente em tela Então a gente tem um estado de atualização e a última etapa de um ciclo de vida de um componente

seria de destruição componente vai ser removido de tela porque porque o usuário tá trocando de página vai visualizar outros componentes ou usuário clicou no botão vai abrir um novo modal que vai substituir tudo enfim várias coisas podem ser as causadoras da destruição de um componente em tela e para a gente fazer a manipulação desse ciclo de vida existe um Hulk que também é muito utilizado dentro do react é um Hulk também fundamental para entender como react funciona que se chama e os effect Então deixa eu colocar ele aqui do lado e os effect e o

que que o youse efect vai permitir que a gente faça e os efects vai permitir que a gente reaja a essas etapas do ciclo de vida do nosso componente então a gente pode fazer uma função que vai ser executada toda vez que o meu componente for criado ou toda vez que meu componente for atualizado ou toda vez que meu componente for destruído e os Effects significa usar um efeito que o efeito o efeito colateral Então a gente vai ter um efeito colateral toda vez que o meu componente de estado que mudar o ciclo de vida

dele então eu trouxe um exemplo prático também para a gente entender o que que isso significa eu vou abrir aqui o nosso projeto para a gente entender eu criei esse exemplo aqui onde eu utilizo e os Effects eu vou mostrar para vocês todos esses ciclos de vidas que Eu mencionei para vocês então aqui dentro do meu componente eu criei dois estados um estado que é uma string e outro estado que é um boleano True or falsa e aí eu tô mostrando aqui em tela para o meu usuário dentro desse componente dois inputs um input onde

o usuário vai digitar um texto e outro input onde o usuário vai poder clicar no checkbox e esses inputs atualizam o valor do meu estado então aqui toda vez que o usuário digital valor no input o valor aqui do meio da minha vela e vai mudar vai mudar para esses string Que o usuário digitou e toda vez que o usuário clicar no botão do checkbox o meu boleano é que vai mudar para o falso dependendo do que o usuário clicou E aí aqui eu trouxe a definição do eu vou me entender aqui como é que

os efects funciona Estou vendo que eu declarei aqui o Wheels Effects e a o primeiro parâmetro que eu passei para esse Hulk foi uma função uma função anônima que eu declarei uma função e dentro dessa função eu coloquei um consolog vou trocar aqui de useffects para Hello from e os Effects e o segundo parâmetro que eu passei esse usa effect foi uma rei e esse arreio a gente chama de Arreio de dependências e dentro desse agente dependências eu passei o nosso Belo aqui essa string que o usuário vai digitar o que que se usa efex

está fazendo eu tô pedindo para ele Ó observa a mudança desse belo e aqui esse estado dela toda vez que esse estado velho atualizar eu quero que tu chame essa função que eu te passei de parâmetro essa função de karlback ou seja toda vez que o valor do Estado vela e mudar o meu componente vai ser renderizado novamente pô eu tive uma mudança no ciclo de vida do meu componente ele foi atualizado então quando os Effects identifica faça a mudança ele vai chamar o consolog mas detalhe aqui ele só vai chamar o consolov ou seja

só vai executar essa função que eu passei para ele quando o valor de vela e mudar porque ele fica assistindo os valores que estão dentro desse a rede de dependência Então vamos abrir o nosso navegador para entender como isso funciona eu tô aqui com meu input com o nichovelo e o meu checkbox aqui do lado toda vez que eu clico no meu checkbox não vai mostrar nada aqui no meu login vou clicar no chat box de clicar clicar tá trocando de tudo para falso nada tá acontecendo mas toda vez que eu mudar esse meu vela

aqui nessa string lembra que é para que ele logar aquele Hello from mus efects que eu coloquei lá ó Então vamos ver vou mudar aqui para início ó a gente consegue ver aqui que teve seis logs de Hello from e os effect E se eu continuar digitando ó ele vai logando várias vezes porque porque isso aqui tá trilhando um efeito colateral que tá executando aquele usaflexos executando aquela função que eu passei para ele de parâmetro mas Fê beleza eu entendi se eu quiser ficar assistindo o valor de uma mudança dentro do meu componente eu coloco

na rede dependências mas se eu quiser rodar essa função toda vez que o componente é criado a primeira vez e depois nunca mais executar como é que eu posso fazer isso bom a gente pode vir aqui e zerar o nosso rede dependências não colocar nada dentro dele quando a gente faz isso a gente diz para o react ó eu só quero que tu Execute isso aqui uma vez e que vez é essa é a vez que o componente for criado a primeira vez quando ele foi criado ele vai executar essa função aqui depois nunca mais

vai executar Então vou voltar aqui para o navegador vou limpar meu Consul e vou dar um Reload para vocês verem ó que ele vai vai logar Hello from e os Effects E por que ele alugou duas vezes bom porque o meu react tá rodando no modo Street mode o que que é esse modo strikemodo basicamente é um modo de desenvolvimento que vai nos mostrar alguns erros a mais e também vai montar e desmontar o nosso componente duas vezes mas não se preocupem isso isso aqui é padrão quando tiver rodando em produção ele não vai estar

nesse modo Strike e vai executar só uma vez o que seria em produção seria quando a gente gerar o build final da nossa aplicação e fazer o Deploy para que o nosso cliente consiga acessar a nossa URL acessar o nosso site mas basicamente o use Effects com a rei de dependências vazio ele vai executar só no momento da criação do meu componente depois ele não vai mais executar E lembra que eu falei para vocês que existe mais uma etapa do ciclo de vida do componente que seria a etapa de destruição quando meu componente vai ser

destruído bom a gente consegue executar uma função quando nosso componente for destruído através do retorne dentro do nosso e os effect Então se a gente colocar um re Turner dentro dessa nossa função de Tal Beck que a gente passa para os efeitos com a rede de dependências vazio ele vai executar esse return toda vez que meu componente for desmontado e aqui nesse returno a gente pode passar uma função também que vai ser executada quando o componente estiver sendo desmontado ou seja ele está sendo ruído de tela tá sumindo da tela então aqui eu vou colocar

uma função que também vai fazer um consolog eu vou colocar Hello from the stractions E aí agora como é que a gente pode simular esse ciclo né onde o componente está sendo destruído bom vou mostrar aqui para vocês como é que a gente pode fazer isso aqui no meu App eu tô renderizando o meu componente só se a variável es visible quando ela tiver falce eu quero que esconda esse componente ou seja não mostre mas ele em tela então eu vou descontar esse botãozinho aqui que eu já tinha criado e esse botãozinho nada mais fácil

que vai mostrar um clique aqui para esconder na tela para o usuário toda vez que o usuário clicar para esconder ele vai setar os setes vezes vou para falso E aí esse essa condição aqui não vai ser mais verdadeira e o meu componente vai ser escondido ou seja ele vai ter que ser destruído de tela ele vai ser desmontado E aí a gente vai ver aquele blog lá sendo logado no nosso navegador Então vou voltar aqui para o meu componente vou dar um Reload ele deu Aqui ó o Hello from e os Effects Hello from

tstring e depois helloframix que é o modo desenvolvedor ele monta e desmonta O componente uma vez mas eu vou limpar aqui os logs e vou clicar para esconder quando eu clicar para esconder meu componente vai sumir e ele vai logar o Hello from destructring e aqui a gente poderia fazer isso aqui ficar mudando para true falso Então em vez de colocar sua falsa eu vou colocar para ele setar o inverso do valor atual então se tiver true seta para falso se tiver falso você até patroa e a gente vai ver e os Effects entrando em

Ação ele vai rolar ele vai logar o hellowforme os efeitos Então vamos ver aqui ó vou clicar ele tá fazendo o ciclo de vida de montar e desmontar esse meu componente então o Usaflex é um Hulk bem poderoso para a gente reagir a ciclos de vida do nosso componente essas atualizações dos Estados do nosso componente e ter funções né que vão ser chamadas nesses momentos e o último ponto que a gente vai entender como é que a gente consegue criar lógicas reutilizáveis usando os hulks né e compartilhar essas lógicas entre os componentes então aqui a

gente pode extrair lógicas e transformar em rux e como é que a gente cria os nossos próprios hulks bom basta a gente declarar funções seguindo o padrão US então sempre quando a gente for criar um novo Hulk a nossa função deve começar com o prefixo e use em seguida o nome que a gente quiser dar então Digamos que eu quero criar um Hulk para ser um contador ele vai ter uma função de incremento e decrementa né incremento e decreto valor do contador eu posso criar um novo Hulk chamado e os Counter ou e os contador

e aí esse Hulk eu vou usar dentro dos meus componentes para reutilizar essa lógica do contador então de novo vamos ver um exemplo na prática que vai ficar bem mais claro de entender então voltando lá para o nosso Exemplo né inicial do contador do componente que tem um contador aqui a gente está criando uma função de incremento E caso a gente quisesse criar uma função para diminuir o valor né Por exemplo aqui eu quero decrementar e até criar uma nova função de cream e aqui eu colocar certo valor atual que é o valor antigo menos

um E aí aqui eu ia criar um novo botão decrementar e aqui vai chamar a função de creamento E aí abrindo lá nosso navegador a gente já viu adiciona E decrementa se eu quisesse extrair essa lógica aqui de atualizar um valor para mais um ou menos um dentro do estado para um Hulk eu posso criar uma nova função e compartilhar essa lógica entre os componentes então aqui eu vou criar por exemplo uma nova pasta que eu vou chamar de hulks aqui dentro eu vou deixar todos os meus hulks customizáveis ou seja os hulks que eu

criei e aqui eu vou criar um novo arquivo que eu vou chamar de US counter.ts dentro desse arquivo e os Counter eu vou basicamente declarar uma função com aquele prefixo que eu falei para vocês então vou colocar exporte function esse meu e os Country não vai receber nenhum parâmetro e aqui dentro eu vou colocar essa lógica aqui né de criar um novo estado tem um decremento e aqui dentro dele eu vou basicamente retornar o valor atual a função de cramente e a função incremento e agora lá dentro desse meu componente eu posso tirar tudo isso

aqui e fazer um US Counter para usar esse meu Hulk Counter que eu acabei de criar e aqui eu vou pegar dentro dele aqui a gente não vai desestruturar em forma de Arreio em forma de objeto porque aqui eu retornei com um objeto que tem todos esses valores então que eu vou retornar vou pegar valor atual de pronto e agora eu já Abstrai toda aquela lógica de contador para dentro de um Hulk e esse Hulk Agora é reutilizável eu posso usar em outros componentes que precisem ter um contador também voltando aqui para o nosso navegador

vou dar um reloud e a gente vê que tudo continua Funcionando normalmente e para começar a usar os Hulk de maneira mais profissional e melhorar a performance da sua aplicação Eu recomendo que vocês assistam um outro vídeo que eu já fiz sobre hulks aqui no canal onde eu mostrei dois hulks que vão melhorar totalmente a performance da sua aplicação react eu vou deixar o link aqui no card bom e eu gostaria de aproveitar esse momento para agradecer todos os membros aqui do canal o apoio e a confiança de vocês no meu trabalho são muito importantes

para que eu continue trazendo cada vez mais conteúdos eu agradecimento especial a todos os membros seniores aqui do canal então muito obrigado Rogério Oliveira Mr bye Tauã guerlene Daniel Henrique Flávio Santos Cristóvão Martins Miguel Leonardo Machado Frank Santos André Brito Luiz Felipe Rafael Cordeiro Cícero e Rafael Kenzo Vocês são muito especiais aqui no canal bom galera para Esse vídeo foi isso e até o próximo vídeo