React Hooks: Aprenda os MAIS IMPORTANTES em 50 Minutos!

E fala galera sejam muito bem vindos a mais um vídeo aqui do canal dicas para deve ser o canal que traz para você programação sim enrolação e hoje galera sem enrolação a gente vai aprender os looks mais importantes do Rei aqui então o que você precisa saber para se tornar um cara aí no Rio aqui beleza então o que a gente vai aprender são os seus Stitch e o leque estresse E os surdos ter e os contact e os mesmo e os Callback e os layout excesso então esses aqui são os mais importantes que você

precisa saber a gente vai aprender aqui nesse vídeo hoje empresa mas vamos fazer que compromisso antes de começar o vídeo que ele compromete sempre cara fica até o final se você curtiu esse conteúdo se você achar que esse conteúdo agregam valor para você no final você deixa o seu joinha aí se inscreve no canal porque se motiva demais você não tem noção como isso me motiva a continuar Trazendo conteúdo para você beleza então sem mais delongas vamos lá para o conteúdo começando pelo iOS state o primeiro Hulk que a gente vai aprender vai ser o

Yuri Está que ele é basicamente uma forma que a gente tem de armazenar state nos nossos componentes funcionais e já vem um ponto muito importante os looks up quem só consegue utilizar eles dentro de componentes funcionais por isso que compreende funcionar estão se tornando cada vez Mais o padrão do leque aí porque componente Classe A gente não consegue utilizar uso que está bom mas eu fiz uma aplicação aqui bem simples para gente ver o uso esse aqui na prática é basicamente a gente quer é incrementar né a gente quer aumentar esse número aqui quando a

gente clicar nesse botão e a gente vai precisar de steak para fazer isso né porque quando a gente altera o Stitch O componente renderizado novamente então quando a gente clicar Nesse botão a gente vai querer alterar a gente quer alterar né o Stitch desse zero aqui para que aí sim esse componente é renderizado esse zero seja incrementado de fato Tá então vamos usar o iOS 6 para fazer isso a primeira coisa que a gente precisa fazer é importar ele aqui torre aqui então vou dar um Import aqui o from buy aqui ok e a gente

vai importar o use e site aqui Dori aqui beleza agora para declarar um state a Gente vai fazer o seguinte ó aqui no corpo do nosso componente a gente vai escrever consiste tá E esse conte vai ser uma lista que vai ser igual ao existente por quê Porque esse usestate vai retornar dois valores para gente o primeiro vai ser o Stitch Enfim então por exemplo vou colocar Counter Ok e o segundo vai ser uma função que a gente vai usar para alterar esse state que no caso eu vou colocar sete Counter e é meio que

uma convenção tá gente colocar Por exemplo Counter aqui é o nome do state account EA função que faz alteração desses Tate se chamar 7e o nome dos textos que no caso é sete carros tá e aqui a gente vai passar para o Stitch o valor padrão de cicalt então por exemplo eu quero que ele comece sem do zero é só passar 10 aqui para esse os state agora basta a gente colocar o Counter aqui show de bola vamos salvar e continuar zero aqui se eu mudar aqui para dois aqui vai mudar para 2 também Porque

esse aqui como eu falei ao valor inicial do Stitch Então vou de e agora a gente vai usar esse site Counter aqui para aumentar esses tente aqui em um sempre que a gente clicar nesse botão Então vamos criar aqui uma função O que é o maior fã tion chamada increment Counter tá E essa função basicamente vai chamar o site Counter e a gente pode simplesmente colocar Counter mais um porque esses eticamente vai receber como parâmetro o novo valor né então por Exemplo se eu colocar 10 aqui e dá uma implemente e tem que chamar essa

informática um Kinect no Click do botão Então vou chamar aqui internet calma Então se o que que a internet agora ele vai mudar para dar esse mais a gente quer apenas aumentar em um então eu vou pegar o valor atual e colocar account mais um Agora sim deixa eu Recarregar para ele voltar para zero Agora sim está funcionando show de bola então a gente já tá usando esteja aqui na prática você Ver que é muito tranquilo né mas tem um probleminha aqui galera porque quando a gente quer é alterar o Stitch baseando-se no seu Valor

anterior Então nesse caso aqui por exemplo a gente quer alterar esse site baseando-se no seu Valor anterior ao clique então quando a gente brincar nessa implement a gente quer pegar o valor interior ao clique que nunca o e aumentar em um correto quando a gente quiser é fazer esse tipo de comportamento o ideal é que aqui no Site onde a gente passa em uma função tá E essa função vai receber o prev Stitch E aí sim a gente retorna nessa função o valor que a gente quer colocar como novo de se sente então eu quero

colocar o prevstate mais um agora ele vai funcionar perfeitamente Mas essa é a forma recomendada que a gente tem de fazer esse comportamento de pegar o valor anterior e fazer um valor novo baseando-se nesse Valor anterior então é bem melhor que a gente passe essa função Aqui recebendo prevstate que no caso quando a gente clicar aqui na internet esse prevstate vai ser vocês e aí o retorno nessa função vai ser o seis mais um então ele vai virar 7 Beleza então assim que a gente consegue usar o resistente aí você vai que é bem tranquilo

e assim que a gente consegue usar e modificar state em Componentes funcionais e outra coisa que pessoal é isso é não é só Presidente é para qualquer o que tá o número de vezes que Um Hulk é executado nunca pode mudar Como assim Felipe vamos supor vamos pegar exemplo aqui que a gente acho que vou para o if Counter igual a 1 e aqui a gente usa outro existente aqui isso aqui galera não pode acontecer tá ele vai dar um erro aqui ó por quê Porque o react hooks must be Cold in the exact Order

ou seja aqui nesse nessa condição aqui de que se falso a gente chamou um existentes certo mas a condição de que cifra Trio A gente é meu dois Isso não Pode acontecer tá pessoal a quantidade de vezes que um Hulk é chamado nunca pode mudar sempre tem que ser a mesma então a gente nunca pode colocar Resumindo aqui tá a gente nunca pode colocar um Hulk dentro de um if dentro de uma função porque a quantidade de vezes que esse Hulk vai ser chamado vai mudar isso não pode acontecer tá bom a quantidade sempre tem

que ser a mesa então mais uma vez Resumindo você não pode colocar um Hulk dentro de uma Função um Hulk dentro de um e fica porque aí o que é que ele vai reclamar ele vai desse tipo de erro aqui tá e a gente também pode Galera ainda não se sente colocar um objeto aqui tranquilamente então por exemplo vamos supor que você lá vamos comentar isso aqui com contra o bar ele comentou para mim eu vou criar outro Stay o chamado state e vou colocar setstate e aqui eu vou dar um Stitch e aqui dentro

eu vou colocar um objeto que vai ter o caldo Que a gente anteriormente que vai ser zero que eu vou colocar um Fini aqui por exemplo que eu vou colocar Light tá a gente agora quando a gente quiser por exemplo fazer um Informante no carro que a gente pode chamar o setstate e aqui uma coisa importante tá a gente vai pegar o prédio site da mesma forma mais gente vai precisar retornar ele inteiro ok Porque esses assistentes aqui ele vai substituir feito por completo Então se a gente colocar apenas o Counter aqui tipo Prevstate mais

um ele vai substituir esse objeto aqui apenas por esse objeto então o novo state não vai ter se Light então a gente sempre tem que usar no caso tem que dar um retorno aqui né então a gente vai dar o retorne Beleza então sempre que a gente quiser é usar um skate em um objeto dentro quando a gente quiser você tá um novo valor baseando-se no state anterior a gente precisa retornar o objeto inteiro assim OK e a gente pode colocar o filme aqui Por exemplo dar que só para a gente testar aqui state. Taught

ok aí continuar funcionando da mesma forma na verdade aqui né e esse Counter esse state é presidente ponto Counter mais um né Agora sim beleza então a gente consegue também colocar objetos assim dessa forma e é importante que quando a gente coloca esses objetos aqui não sei que a gente é 7 o novo valor passando um objeto e aí tudo que estava no prevsat e o novo valor que a gente quer acertar Tá Bom mas normalmente galera gente não vai usar é o Wilson sei que dessa forma tá normalmente a gente vai usar sei lá

se a gente quiser é criar um efeito de calmante Mc give me a gente vai usar dois os state então tipo com esse filme 7 filme e aqui a gente pode por um existentes colocar Dark apagar esse cara aqui o Enem ConectCar onde a gente simplesmente vai colocar 17 Counter prevstate prevstate mais um então Normalmente a gente vai usar dessa forma que a gente não vai criar um um State com o objeto que têm todos todas as propriedades do nosso state né a gente vai fazer vários Estreito assim é o que a gente mais faz

aí o que você mais vai ver aí nas aplicações Ok então no geral Esse aqui foi esse sei se ficou qualquer dúvida podem perguntar e que aguarda você beleza então vamos lá pro próximo agora a gente vai conhecer o Hulk use e fake que é um dos looks mais importantes Aí é um dos mais usados Noroeste e ele basicamente ele diz muito pelo seu nome então eu usei é que a gente usa quando a gente quer executar alguma coisa quando alguma coisa aconteceu com alguma coisa mudar por exemplo eu criei aqui é bem simples esse

exemplo aqui que é o seguinte a gente tem é 3 tipos de resource Type né então a gente tem o post os coments E os surdos então quando eu clicar em Postes eu mudo o Resort se prepara Pontes quando clicar em Comente O mundo ver se serve para corrente e assim por diante né o código tá o que a gente guardou mystate muda que está aqui primeiro essa função chama essa função quando a gente clica nos botões e agora eu quero fazer o seguinte vamos supor que quando o usuário clicar imposto e eu quero fazer

o frete eu quero pegar post de alguma aí eu vou usar essa divisão placeholder aqui para fazer justamente isso então aqui nos braços fortes eles têm justamente os postes comente e tudo Justamente que a gente colocou aqui então percebe que a gente entra na natureza Luizete Então quando você quiser fazer alguma coisa quando algo mudará pensa beleza com os ovos até aqui para isso nosso caso aqui eu quero fazer o frete eu quero pegar de uma pelos peixes quando o leitor sabe mudar eu quero pegar de uma pelos coments quando você solicitar para mudar Aí

foi Igualmente e assim por diante Tá bom então vamos fazer isso aqui primeira Coisa para usar o CEFET a gente vai importar ele aqui do Yeti e agora a gente vai simplesmente chamar ele que eu vou chamar em baixo aqui duas State Ah tá E aí seu Zé que ele vai receber uma função então vou passar o maior fã tion e como segundo parâmetro e vai receber uma lista essa lista aqui é o Array de dependências dele mas na verdade vamos tirar essa lista por enquanto ela é opcional e eu vou colocar um console. Long

Ranger aqui se a gente Usar o CEFET sem passar uma lista ele vai executar essa função aqui sempre que o componente ser renderizado novamente tá então eu vou dar uma espécie aqui eu vou no console e dá uma olhada sempre que eu klickow tá vendo ó ele tá executando o render aqui ok então quando a gente passa aí o cefetes em uma lista como segundo parâmetro ele vai ter comportamento ele vai ser executado sempre que a gente atualizar o nosso componente OK mas agora se a gente Passar uma lista ela vai receber o valor que

a gente quer meio que assistir por exemplo se eu passar por site aqui para ela esse o CEFET ele só vai ser executado quando esse vai ser site mudar então esse o CEFET aqui ele só vai ser executado quando a gente mudar esse Victor scipii Então vamos salvar aqui e vou ver no console novamente e agora e eu vou limpar ele aqui a e agora quando eu mudar o site ele de render tá vendo Então eu vou mudar aqui Eu vou colocar piercing Type chart Ok vou salvar voltar aqui vou limpar e agora o cliente

o doce vai ver site mudou então ele ligou aqui para mim sei o que que há entre uso de novo ele não vai executar novamente porque porque o esforçar ele não mudou ele continua o valor que ele era anteriormente que no caso é tudo isso tá Então essa é a natureza do e o cheque ele só vai ser executado quando algum valor que a gente passa nessa lista aqui mudar se a gente Por exemplo passar outro valor aqui sei lá algum instante modo cão ele também vai ser executado quando esse cão mudar Ok então lembre-se

se a gente passar um cheque sem uma lista ele vai ser executado sempre que o conferência atualizado e se a gente passa como Alice ele vai ser executado sempre que alguns valores que a gente passar nessa lista for alterado nesse caso que sempre que o seu WhatsApp for alterado então a gente já está quase chegando nosso objetivo né Que é fazer o frete de uma p i fazer o frete para uma perdão Quando vai ser o site mudar a gente Ah tá escutando né é super sai por meio dos leque agora basta a gente fazer

o frete para essa até então eu vou copiar isso aqui ó o que o Jason placeholder fornece para Gente vou usar o fat aqui dentro ok a e agora eu vou dar um blog aqui nesse dia só o que é o resultado da Penha Então vou aqui no Spike com o seu e agora eu vou ficar em comente e ele fez Para mim nesse caso aqui galera a gente tem que colocar aqui por site né então eu vou deixar uma tempo este vídeo aqui não tem preço em e aqui. Com barra dorsais ou salvar abrir

o console aqui de novo foi limpar e agora quando clicar em Postes ele vai fazer o frete dos postes de cem postes aqui quando eu clicar em tudo ele vai fazer o frete de 200 fios aqui para mim ok e quando eu clicar em comments ele vai fazer o frete de São Miguel 500 comentários aqui para Mim então você conseguiu ver perfeitamente como que o Safety funciona né a gente tá executando esse frete e sempre que esse ver se Type for alterado claro isso é muito muito bacana a gente Carol effections os mais importantes são

os outros que a gente mais que utiliza no nosso dia a dia e uma coisa importante aqui galera aqui esse o CEFET ele não pode ser uma função assíncrona a gente não pode fazer o CEFET assim por um dessa forma a gente passar o mouse em Cima ele até mostra para gente né um aviso de que é unhas até que ele não pode ser assim como tá então quando a gente quiser por exemplo usar o ao leite aqui dentro como que a gente faz a gente vai ter que criar aqui no ISEC uma função e

essa E aí você frete grstis Oi e essa função pode ser assim tá E aí sim a gente vai pegar esse fat jogar aqui e aí a gente vai converter para assim que a noite né então por exemplo construir bom se vai ser ao ifet E aí o Response que usam vai ser await response. Jason Ok E aí sim a gente consegue dar um blog nesse principal se Jason e aí a gente chama esse setversion Esteves e aqui dentro aquele tá dando um erro que ainda porque a gente pode tirar esse assim aqui agora sim

a gente consegue usar o async-await aqui dentro do CEFET dessa forma tá então se a gente voltar aqui no console E é clicar aqui nos forceps continua da mesma forma Então quando você quiser usar async-await dentro do cefec você tem que criar uma função assim para aí sim dentro dessa função assim como você pode usar o ao leite e aí você chama essa função aqui normalmente não usou é que a gente pode também afetar essa vez conciliação aqui para um state Então posso colocar por exemplo consiste haitianos aqui sete a itens que vai ser um

existente de uma de uma vez vazio aí A gente pode pegar aqui tranquilamente e fazer 17 itens aqui para o responso de exon E aí a gente pode aqui embaixo dessa tive fazer um up nesse site TMZ aí para cada item a gente pode renderizar um peak um parágrafo né com o item. Tython é tranquilamente tá gente pode também fazer esse tipo de coisa então se eu clicar em posto aqui ele renderizo os por isso aí para mim comente Eu acho que o comente ele não tem uma uma propriedade chamada tython Hoje eu vou fazer

o seguinte eu vou pegar aqui uma dica todo mundo tem age só pra gente conseguir ver a então quando a gente pega né os postes a gente endereço eles aqui os comentários também estudos também ok outra coisa que a gente pode fazer comida fresca é o seguinte a gente pode simular o comportamento de dois lados ai começa o diz que a gente tem nos componentes de classe aqui no caso é o componente de malte e o componente meu ao mal então Esses dois caras gente também consegue simular com o iOS7 vamos supor eu vou fazer

o seguinte vou comentar esse cara aqui tá E vamos supor que a gente quer criar outro exec que vai ser executado só quando o compromisso é idealizado pela primeira vez que a gente pode tranquilamente fazer mais de 17 aqui nós componente Ok e para executar uma função sempre que o componente seu endereçado apenas pela primeira vez a gente simplesmente vai passar uma lista vazia Aqui como lisa de dependência para o efeito Então esse cara que é basicamente um componente de malte Ok então vou dar um logo aqui vou salvar agora eu vou dar um espectro

aqui no console eu tive aqui esse componente do esmalte foi executado E se eu mudar o skate aqui o seu atualizar o componente ele não vai ser executado novamente tá vendo Então é dessa forma que a gente consegue simular o comportamento do componente de esmalte usando o useeffect e o componente Biomout é muito simples basta nesse o CEFET com essa lista de dependência vazia a gente passar um retorno aqui e essa função vai ser basicamente O componente be one Half Então vou colocar um console. Log componentes eu não aos Ok então vai ser bem vai

ser um pouquinho difícil para gente ver é mas eu vou tentar aqui ó então a recarregue a página componente de esmalte agora você vai carregar ele não vai dar para ver o log Mas enfim sempre que o Componente ele for removido do dono sempre que ele for sempre ele passar por esse processo de esmalte essa função aqui vai ser executada Então é assim que a gente consegue fazer essa simulação é meio que vamo lá o componente do esmalte nude CEFET assim que a gente consegue emular o componente Without também no ISEC Lembrando que a gente

precisa passar essa lista de independência aqui como vazia sem nenhum valor dentro dela Então Esse foi galera oh Ivete espero que vocês tenham entendido porque é um dos outros mais importantes temos que a gente mais utiliza aí nos nosso projeto agora a gente já tá pronto para ir para o próximo Então bora lá agora a gente vai dar uma olhadinha o que chamado ilse grave que é um dos looks menos conhecidos aí menos usados mais que ele pode ser muito útil em determinadas situações então o que que ele faz exatamente nós vamos começar por isso

Que Jesus é fiel ele guarda uma variável agora o valor assim como os state mais é realizado o componente não é renderizado novamente tá então eu vou mostrar para você três situações em que a último vai ficar mais fácil para você entender aplicabilidade dele tá então vamos lá primeira situação que eu vou jogar aqui é o seguinte vamos supor que a gente tem a missão de guardar em algum lugar Quantas vezes o nosso componente foi renderizado tá então que esse por já Tinha aqui bem simples que basicamente tem um input e quando eu mudo ele

é o componente é engraçado né novamente porque eu atualizo state aqui beleza eu coloco o nome aqui My name is nome que eu digitei aqui agora vamos supor né que a gente quer guardar como eu falei quantas vezes esse componente aqui foi idealizado como que a gente vai fazer isso como que a gente faria isso sem o iOS vamos lá então primeiro eu imagino né que você pensou em criar um excelente Aqui sei lá é render-se tá e 17 Rangers aqui que vai ser basicamente um existentes con10 né ou com um né que eu comprei

utilizou pela primeira vez Então já conta como um ainda aqui agora a gente pode usar um CEFET né que a gente já viu Então e os effect aqui e aí a gente passa uma lista vazia de dependência porque isso aqui vai ser executados em e foi engraçado e a gente só coloca 7 Windows aqui pega o previsto a gente coloca pelo site mais um isso Aqui será que vai funcionar Vamos ver até o aviso que ele deu Aqui ó basicamente ele já tá avisando aqui para gente ir de um problema que vai ser o Loop

Infinito tá Por que que vai acontecer aqui galera vamos e se você fé que ele vai rodar sempre que o componente para renderizar novamente concorda então quando ele rodar ele vai atualizar o Stitch E aí o componente ele vai entregar novamente a esse o cheque vai rodar de novo aí eu compro a gente Vai vai a gente vai mudar efetivamente o compra gente vai precisar de novo então vai ficar num Loop Infinito cara porque porque os acidente aqui ele vai fazer o componente sem precisar novamente então isso aqui vai dar uma infinito eu nem vou

salvar aqui porque vai travar o computador meio da aula aqui então basicamente que a gente não consegue fazer comportamento aqui com o e os state Você concorda que se esse renders aqui essa contagem de renderizações não Atualizar se o componente ia ficar show ia funcionar e a justamente ir para isso que a gente faz lá o wi-fi tá então primeira coisa vamos mudar isso aqui OK Eu vou me importar primeiro aqui Wheels ref E aí aqui e a gente vai para declarar um defe não é a gente vai colocar consiste Rangers e vai ser igual

e o chefe dessa forma OK agora a gente vai fazer o seguinte pra setar o valor dessa Rangers aqui a gente vai colocar renders. Corrente e aí vai ser por Exemplo vender ponto corrente mais um porque se vendas.com que é basicamente o valor atual OK agora vamos salvar e vamos colocar um parágrafo aqui de renders e eu vou colocar o renders. Quente e vamos salvar agora o endereço tá não aqui porque a gente não colocou nada aqui eu vou colocar 10 aqui como o valor inicial Então vamos salvar agora tá zero Beleza então aqui assim

como eu disse a gente a gente coloca o valor inicial dessa propriedade corrente Aqui e agora se a gente atualizar ou dá uma olhada ele tá fazendo essa Contagem aqui galera por quê Porque a gente atualizou o valor do venders Mas como eu falei quando esse corte atualizado o componente ele não é renderizado novamente lá então o componente ele foi atualizado aqui porque a gente está mudando state certo aqui ela não tinha gente me É mas ele não é renderizado quando a gente mudou ainda então por isso que a gente conseguiu ter esse Comportamento aqui

então o wi-fi é bom para quando você quer persistir um valor durante todo o ciclo de vida do componente como a gente está fazendo aqui mas você não quer que quando esse valor seja alterado o componente seja renderizado novamente Então esse é o primeiro caso de uso aí muito bacana do surf agora vamos para segunda aqui que é o caso mais usado né é a situação que a gente mais vai usar o stress que você mais realmente vai usar aí esse Hulk Aqui que é o seguinte a gente consegue usar ele para referenciar elementos HTML

Como assim se a gente colocar a carne pude uma propriedade chamada UEFI e colocar igual tá eu vou deletar esse aqui eu vou colocar o seguinte vou criar outro aqui chamado um contraste tá vai ser o wi-fi aqui OK agora eu vou passar esse input with aqui parece o resto do input Ok eu vou tirar esse parágrafo aqui beleza agora vou salvar e eu vou dar um blog aqui nesse input with assim Que componentes é renderizado eu vou colocar essa input with aqui e vamos ver aqui no console que que esse cara vai ser dá

uma olhada ele é um objeto E aí dentro do carro a gente deixa eu dar um login no no input with. Que a gente é melhor Tô indo tivesse. Corrente agora eu vou salvar eu vou abrir aqui o console e vamos agitar alguma coisa que nem tu tiver aqui que acontecer dá uma olhada aqui o cante agora ele é basicamente o elemento HTML input então A gente consegue usar o f para fazer esse tipo de coisa para armazenar o elemento HTML esse dentro aqui do nosso corrente nada nossa propriedade corrente agora vamos supor que a

gente quer só vou criar um botão aqui tá que basicamente vai Focus input ele vai pegar o cursor né E focar no input quando a gente clicar nele então quando a gente ficar a gente quer que ele faça isso aqui a gente consegue fazer isso aqui com input with Então vamos criar Uma função aqui chamada Focus input e aqui a gente vai e faz o seguinte input with. Corrente né que é lembrando o elemento HTML esse deste input aqui e a gente vai ter acesso à propriedade de focos ele então se eu salvar agora e

chamar esse Focus input aqui no Clique a gente vai ter o comportamento que a gente quer então a gente usa o surf principalmente para isso o cara para pegar uma referência né de elemento HTML de algum de qualquer Coisa tanto do Pedro Bota qualquer coisa a gente consegue fazer esse esses que me aqui que passar o wi-fi aqui para o elemento e passar o nosso vai ficar nem frio e aí a gente consegue acessar a propriedade desse elemento como por exemplo aqui nem pude a gente consegue acessar o Focus delicado Então isso é outro caso

de uso bem bacana Aí do iOS e a gente também pode usar o wi-fi para outra situação uma situação onde a gente quer guardar O Valor anterior de um Steak por exemplo vamos supor que a gente ditou abre aqui então o nome agora esse name aqui é AB mas em um e o resto a gente consegue Guardar O Valor anterior a isso é bem então no caso gente consegue guardar apenas o ar então gente também consegue mais uma vez Guardar O Valor anterior e usando o estresse Então como que a gente pode fazer isso vamos

é primeiro apagar esses caras aqui vou tirar esse botão aqui também vou tirar estivesse aqui beleza Agora a gente vai é criar uma raça aqui sei lá videogame e colocar Surf Tá e agora a gente simplesmente vai pegar o meu CEFET e sempre que o nome mudar então sempre que o Nei me aqui mudar a gente vai pegar o exame. Corrente e colocar igual name agora eu vou colocar um parágrafo aqui and my name was e colocar o Prisioneiro ponto Card então se eu salvar aqui e agora colocar Felipe ó tá vendo que ele sempre

pega O Valor anterior de um está aqui então isso aqui É muito bacana também a gente também conseguiria fazer isso aqui com e os state mas aí sempre que a gente pegasse Valor anterior de cinema e a gente ainda está componente novamente porque o Stitch atualizado Então quando você quer pegar o valor anterior de um state guardar ele em algum lugar usa o uso F Beleza então esses são os três casos aí que você mais vai se deparar e que você mais vai pa o wi-fi então se você quer guardar uma informação como quantas Vezes

eu comprei foi realizado se você quer referenciar algum elemento HTML como a gente fez com input ou se você quer guardar O Valor anterior de um state agora a gente vai aprender o Hulk bem legal que é o iOS rádio ele é um look que parece bastante com isso e seja a gente também usa ele para gerenciar estado nosso componente para gerenciar state dentro dos nossos componentes mais uma maneira diferente que a gente vai ver na prática agora tá então vamos lá é A gente tem uma um exemplo aqui parecido com que a gente já

fez antes que basicamente tem um contador aqui tá gente vai começar com esse exemplo mais simples e por gente vai por exemplo mais complexo a gente tem um contador aqui a gente quer aumentar ele né incrementar ele quando a gente ficar aqui e diminuir ele quando a gente ficar aqui em de corrente Então vamos fazer isso usando o e os ruídos ser Então a primeira coisa a gente vai precisar importar obviamente Western o from Brit Ok então Import né Felipão beleza e agora a gente vai precisar inicializar ele então vamos dar um conte aqui E

esse os lados ter ele vai retornar para a gente uma lista Ok vamos usar esse verdura aqui e essa lista vai receber como primeiro parâmetro com primeiro valor aqui o state em si e um cara chamado despede que a gente já vai ver para que que serve e esse o Brasil se ele vai receber como segundo como primeiro parâmetro o Redutor em si e que abriu os é basicamente uma função Então vamos criar aqui em cima do componente porque é uma função pura não quero que ela sempre retornar a mesma coisa diferente dos parâmetros Então

vou querer lá fora aquele componente que vai chamar medo ser Ok e esse pedido você vai receber duas coisas o Stitch que vai ser o Stitch atual e vai receber a acham que a gente vai ver para que que serve o quis sair comigo e aí esse pedido ser vamos Passar aí por em conta aqui tá bom E como segundo parâmetro gente vai passar o Stitch inicial para esse cara então vamos porque o seu inicial vai ser um objeto que vai ter uma propriedade chamada Country que vai ser igual a zero agora a gente pode

usar esse site Aki bom então posso colocar por exemplo excelente ponto Country E aí eu vou ter zero aqui OK agora que que a gente vai fazer com esse desperte e conheci Edson aqui especificamente a gente vai usar Ambos para alterar o valor desses tente aqui então vamos porque a gente quer aumentar esse Country um sempre que a gente clicar em simplesmente como que a gente faz isso a primeira coisa a gente vai dar um desperte aqui no Internet no evento de clique aqui E esse desperte a gente vai receber um objeto e esse objeto

vai ter uma propriedade chamada Type e essa propriedade vai ser o tipo da Edson que a gente quer fazer o disquete e eu vou colocar internet OK Agora a gente vai ter que escutar essa é que um dentro desse reducer como que a gente faz isso a gente pode usar um Switch aqui a Action. Type o ou seja se essa aqui um ponto Type for igual a internet que é esse caso aqui então se for igual a em Corrente a gente vai retornar um enfeite ok muito na por enquanto um objeto com um ter que

state.com ter mais um e vamos colocar um de fogo aqui que é o padrão Ok sempre Gente coloca onde for para tornar o Stitch então o que que tá acontecendo aqui quando a gente clicar internet você vai ver que vai aumentar mas vamos vamos analisar né Porque que só ocorreu porque quando a gente manda esses Pet aqui automaticamente ele vai cair aqui ok então esses Pet ele passou uma Edson contato internet então ele vai cair aqui dentro de si switch e vai cair nesse queijo aqui porque eu quis desse cara é do time por mente

justamente o Type Dessa desses Pet aqui E esse Case aqui vai retornar o novo e site e o novo esse a gente vai ser que o Country é igual ao Country anterior mais um entendeu então a gente consegue fazer a mesma coisa para de Clemente bom então aqui nos de corrente eu vou retornar 19 sente que vai ser o carro ter que vai ser state.com menos um tá então agora eu consigo dar de presente aqui na verdade eu preciso chamar o desperte aqui né então despede eu vou passar o Type Deferment Lembra no site tem

que ser exatamente o mesmo que a gente usou que a gente escutou aqui no nosso pedido ser então vou salvar e agora assim ele tá funcionando show de bola Então essa é o primeiro caso aqui do redutor tá gente consegue gerenciar o estado da nossa aplicação dessa forma daqui a pouco eu vou explicar para vocês quando que a gente deve usar os verdura e quando eu vi que a gente deve usar o steak Tá mas agora vamos para um exemplo mais Complexo vamos supor que a gente quer guardar várias tarefas é dentro do nosso state

aqui e mostrar elas na tela então vamos fazer o seguinte eu vou apagar estudo aqui esses queijo aqui e eu vou apagar também esse botão e eu esse botão aqui agora vai virar adicionar o OK agora esse Type aqui a vamos fazer o seguinte Primeiro vamos criar um input aqui tá essa input e a gente pode perfeitamente galera o Wilson Wilson e os state juntos tá então por exemplo Aqui é eu quero guardar o valor de um input não faz muito sentido aguardar no esmeril ser Ok então vou guardar não está aqui então eu vou

colocar em Porto Velho set input velho vai ser igual aí o site e eu vou importar aqui do IEC passamos que vazia como primeiro parâmetro como valor inicial e aqui eu vou colocar velho em Porto Velho a e agora no onde aqui de cinco ti eu vou simplesmente E você tá em Porto Velho para ir pronto target. Velho Ok e agora aqui eu quero adicionar essa tarefa aqui no meu indústria como que eu faço isso vamos lá primeiro eu preciso mudar o Type aqui dessa época Então vou colocar EDC e um desperte ele é esse

objeto que a gente passa pelos Pet ele pode receber tanto Type quanto qualquer outra coisa que a gente quiser então por exemplo eu posso passar o input velho aqui e aí tudo que a gente passar para esse objeto o nosso Produto ele vai ter acesso então eu posso fazer algo assim por exemplo caso a ex 1.7 for igual a getesc eu posso dar um retorno aqui eu posso colocar o está o pesquisar Então já vamos aqui o valor inicial do Stitch Então vou colocar Tex mar está vazia eu posso colocar aqui até que você vai

ser tudo que tinha antes então esse acontece se Lembrando que esse tente aqui a gente tem acesso a esse objeto aqui ó state atual e eu vou adicionar uma nova técnica que vai ser Basicamente o name vai ser o Action. Input were O que é lembra não é que um galera é esse objeto aqui tá Então como a gente passou em Porto Velho por esse objeto aqui a gente E aí ele aqui dentro do nosso medos e eu vou colocar um mês comprida de como fosse não é para marcar que ela não está concluída Vou

salvar Beleza agora eu vou fazer um metro aqui nesse instante. Testes.net e Para cada dez que eu vou renderizar um parágrafo não vou colocar até que ponto nem Ok Vamos salvar agora eu vou tentar deixar aqui adicionou beleza Tá funcionando então aqui eu vou fazer o seguinte além de fazer os Pet aqui no Clique do adicionar eu vou limpar o input velho eu vou deixar ele vazio só para resetar o impulso aqui beleza então teste adicionou Ok então tá funcionando aqui o nosso querido você então sobra recapitula a gente passou diz Pet aqui passou o

tipo da Edson e passou esse valor aqui que a gente vai adicionar lá No nosso state da testa está e ela convenção era a gente é mais cara de pai load Ok então sempre chamar de preload aqui e aí a gente passa o elogio aí para o tiver eu ia que a gente vai ter acesso ao aqui um ponto pelo hoje é só uma convenção que a gente usa quando a gente está trabalhando com o usuário ser Beleza então a gente a viu como que funciona esse esse gerenciamento de estados com o o lustre agora

vamos vamos pensar cara quando que a gente deve usar O esquerdo ser quando a gente deve usar o steak basicamente use o escolhido ser quando o seu state for muito complexo então quando ele ficar muito grande cara é uma boa você usar os verduras ele quando por exemplo é um valor de se sente depender de outros valores por exemplo vamos supor que a gente tivesse aqui há outro cara aqui chamado teste scout que vai basicamente guardar quantas tarefas a gente tem ele tem que são aqui ele vai mudar sempre que a Gente à tona uma

tarefa certo então aqui basicamente que a gente pode simplesmente Colocar assim até calma igual a state. Desce Counter é difícil falar isso mais um Então é só exemplo aqui ó que por esse cara que sempre vai depender dessa são aqui é de testes em vai depender desse texto aqui então pode ser uma boa os olhos do ser para isso sabe quando vários Quando vale a várias propriedades os seus sites dependem uma da outra pode ser uma boa você usar o e Os lados Tá bom então quando você sair foi muito complexo quando você cair nesse

caso você pode considerar usar esse Hulk aqui vamos é expandir um pouquinho exemplo aqui vamos fazer uma um tratamento eu explicar uma tarefa a gente marca ela como concluída tá mudar esses alto aqui Desculpe ter só para gente ver esse Hulk aqui funcionando é de outras formas é então vamos lá vamos criar uma nova ética aqui que vai chamar Case tô grotesque que basicamente vai Mudar os Cúmplices de dela então o que a gente pode fazer aqui primeiro outra convenção é sempre retornar o Stitch tá então sempre retornar tudo que tinha sido state Ok então

retorna esteja aqui e aí a gente coloca aqui que a gente quer mudar nessa determinada a Edna então aqui nesse caso eu quero colocar o tex e aqui eu vou fazer o seguinte vou colocar essa é que um aqui primeiro ela vai receber windhex dessa técnica aqui para a gente saber qual teste que a Gente precisa mudar aves completas então o que que eu posso fazer aqui eu posso colocar aqui testes ponto que o teste é igual state. Táxi. Maps Ah tá E aí para cada item eu vou eu vou também receber o index aqui

e tem Dex E aí para cá daí tem Vou verificar o index é igual aqui um ponto pelo hoje Lembrando que a gente vai passar o index da tese que a gente tá clicando para esse aqui é um pão Peloso se for significa que essa teste que a gente tem que alterar então se for Eu vou retornar tudo que tá nesse tem e os conflitos de vai ser tio e se não for eu vou retornar apenas o item Tá bom então isso aqui já vai ser suficiente agora eu vou quando eu clicar aqui em SP

eu vou fazer o seguinte primeiro eu vou receber ainda essa aqui no Mac também ok e agora quando eu clicar nesse cara eu vou jogar 17 com esse Type aqui ok então eu to ask them Type vai ser jogou teske e openload vai ser index beleza e agora eu vou e é fazer um estilo aqui ó Então Vou colocar Style e eu vou ver a Desk. Isso com fita de se ela for completo Se ela tiver concluído eu vou adicionar um teste a decoração aqui eu vou colocar online tio Acho que é essa propriedade aqui

beleza eu vou colocar os dois desenhos aqui ok então vamos ver se vai rolar a não rolou aula você tinha gastado Beleza então vamos colocar teste aqui e cachorro Vamos ver com o motivo de abrir o console deixai o próprio Xbox tá Deu erro aqui no Insta e vamos fazer assim então fazer diferente aqui eu vou falar que o tex decoration ele vai ser ciatec for completa ele vai ser Line tio senão ele vai ser nada Ok vamos salvar agora eu vou dar um teste e se eu clicar ele vai acionar aqui esse completei seu

clicar novamente ele devia e é colocar ele como um universo do que tá agora né então Aqui ao invés de colocar tudo eu vou colocar e tem pontas Compridas para ser o contrário do atual então se a true nesse caso eu vou clicar em vai para falsa Esse é falso ele vai virar o tio então assim que a gente pode usar o Edil ser galera olha que Hulk bem útil né quando você tem um skate bem complexo aí é enfim você pode usar o herdou ser tá bom é um Hulk que acho legal você tem

no seu repertório é bem parecido com o uso o site como eu falei a gente pode usar Os dois em conjunto perfeitamente como a gente fez aqui beleza então cara é um por quê que eu não vejo muita gente usando mais que é muito útil agora você sabe como utilizar o e quando utilizar Eu também agora vamos dar uma olhadinha o Hulk chamado Wheels contas que a gente usa em conjunto com conta e chip ai para passar próprios para uma árvore de componentes Tá bom então com esse book aqui a gente vai conseguir consumir contexto

de uma forma muito simples Muito fácil tá se você não sabe o que é consegui pegar se você nunca mexeu com isso eu recomendo que você deu uma pesquisadinha antes de aprender esse Hulk aqui tá mas você nunca viu ele a seguir o é bem basicamente com conta que Pilar a gente consegue passar próprios para uma árvore inteira de componentes Ok Então nesse caso aqui a gente criou um contact e um conta que vai ter um objeto com seus valores Então a gente tem aqui esse filme que é igual a light E tem essa função

também o filme que basicamente vai mudar esse tema aqui e a gente tem o provar dele o provar dele vai estar em volta de todos os componentes que a gente quer acessar as próprias que se provar ele vai passar posteriormente então por exemplo aqui esse provérbio vai ser um componente Ok normal que vai ter esse filme aqui os mesmos valores que se conta que vai receber vai ter esse filme vai ter essa função aqui tá o filme que basicamente Vai ver o tema é light se for usa para dar que se não for muda para

Light E aí a gente vai passar este pro vai vir aqui beleza e essa própria aqui velho vai receber todos os velhos que a gente vai passar para nossa árvore de componentes Ok então agora a gente vai pegar esse provável é que a gente suportou e vai colocar em volta de todos os componentes que querem usar tudo que a gente passou aqui para esse velho então neste caso dois componentes aqui esse messenger e Esse gritinho O Messi já que dá um contra o clique a gente vê que a gente usou um com ciúmes certo Então

essa é a forma padrão né a forma vamos ver assim sem o uso de contraste consumir conta sem os e contas de consumir contextos Beleza então a gente pega o filme conta que a gente criou aqui e exportou e a gente chama o ponto com ciúme dele e aí aqui dentro a gente consegue usar esse velho aqui que no caso vai ser este velho aqui beleza então aqui a gente tem Acesso por exemplo ao velho. Filme que é este cara aqui ó beleza que a gente passou aqui e a gente também tem acesso ao velho.

Tá Golf mi e a gente também fez isso aqui no outro componente do componente Grid a gente fez exatamente a mesma coisa então basicamente quando a gente ficar entregou filme aqui o tema vai mudar para Dark e assim por diante Ok basicamente com use contente galera a gente consegue mudar essa forma aqui de consumir esse contexto Então a gente vai Importar ele aqui do Rei aqui tá então vou dar uma Import aqui from Create e vou importar o Easy contact e agora cara invés de tem que chamar esse filme e se chamar o com ciúme

dele a gente simplesmente vai fazer isso aqui ó vamos colocar const e os contact e aqui a gente vai passar o contexto e não o com ciúme era assim então a gente basicamente vai passar o filme conta aqui e agora aqui a gente vai ter acesso a tudo que a gente passou aqui para esse Velho parece provado então no caso o filme e o papel filme então a gente consegue Agora acessar o Finn ele até dar volta com print para gente e o teu o filme e agora a gente não vai mais precisar desse com

ciúme então eu vou deletar esse cara vou deletar aqui ok e agora a gente pode tirar esses velhos aqui do dar um controle para selecionar os próximos e tirar esses pontos aqui também ok vou tira Ok vou salvar e agora a aplicação vai continuar se comportando Da mesma forma então basicamente cara com esses em conta que a gente consegue consumir contexto de uma forma muito mais simples de cara ele é muito muito bom basicamente Cara você não quer mais usar o filme conta aqui. Com ciúme para conseguir contextos porque esse Hulk torna muito mais fácil

tá então recapitulando aquilo que a gente faz a gente criou esse contexto que tem dois valores do tema e a função para mim e a gente criou provar dele que é o cara que Vai e volta de tudo aqui em volta de tudo o que quer receber essas provas que ele vai passar para baixo no caso tudo que vai aqui dentro do seu velho Ok E aí a gente para consumir esse contexto a gente usou ou e os e conta que ama que vem simples aí para você usar conta hippie então agora vamos lá aprender

o próximo agora a gente vai aprender um Hulk mais avançado O que é o iOS memo tá e quando que use memo é Bom basicamente quando a gente quer otimizar a Performance da nossa aplicação quando a gente tem uma um problema de performance que tá sendo notável no nosso projeto tá bom criar um exemplo aqui que tem um problema de performance que mostra Justamente a utilidade do exame Então vamos lá vamos ver o que eu fiz aqui é basicamente é eu creio esteja aqui ele se não ver ok que é um que as coisas que

a gente tá mostrando aqui eu criei outro state aqui que esse Tech que é alterado sempre que a gente muda o valor desse Input aqui ok E aí sempre que a gente atualiza o componente sempre que ele renderizar novamente a gente chama essas louco no chão aqui que basicamente retorna O número vezes dois mas eu é bem grande para mim simular que essa aqui é uma função que está causando o problema de performance então se tiver alguma função que tá lenta que tá deixando o seu projeto lento aí você já pode pensar por Talvez seja

uma boa eu usar o Easy mesmo nesse caso aqui a gente tem esses O fãs Então qual que é o problema dela eu coloquei um blog aqui quando ela está sendo quando ela tiver sendo chamada a gente vai dar um blog aqui nessa mensagem então vamos fazer o seguinte vamos porque abrir o console e dá uma olhada no que vai acontecer mesmo quando a gente não sério number o mesmo quando a gente não altera Number ela é chamada Então ela só preciso Number certo que é esse seja aqui mas mesmo quando a gente alterar o

teste que não tem nada a ver Com lamber a gente é nessa função que né tá trazendo um problema de performance para gente Então nesse caso é uma boa a gente usar os mesmos então o que que os mesmos vai fazer ela Ele vai falar assim eu só quero chamar essa isophon quando não vai mudar eu vou deixar o valor dessa função do resultado essa função em memória por isso o nome e os mesmo e aí eu só vou atualizar esse valor quando o não vai mudar Então como que a gente consegue fazer isso aqui

a primeira Coisa a gente vai dar um contraste esse cara aqui tá e eu vou importar o Easy mesmo aqui do riacho Ok e agora eu vou simplesmente chamaríamos mesmo e esse cara e vai receber dois argumentos o primeiro vai ser uma função e o segundo vai ser uma lista de dependência assim como a gente tem nos effect Ok e a gente basicamente vai retornar o que a gente está retornando antes que é o sofá no chão aqui passando o Number e qual que vai ser a sua lista de dependência vai Ser basicamente todos os

argumentos que essa função recebe que no caso é um Uber Beleza agora Oh e vamos abrir o console novamente e dá uma olhada que vai acontecer agora quando a gente mudar o teste essa função não vai ser chamada Então esse problema de performance que foi solucionado porque essa função estava sendo chamada sempre agora ela só vai ser chamada se esse número é que for alterado então por exemplo vou criar um botão aqui que vai dar uma internet Number tá coisa simples aqui só pra gente ver funcionando então esse botão aqui vai você tá o Number

por exemplo para 2 ok beleza agora vamos abrir aqui o terminal novamente se fechou e agora quando a gente ficar nesse implemente essa função vai rodar beleza rodou por quê Porque algum valor que tá dentro dessa lista de dependência aqui no caso o nome foi alterado se eu alterar outro valor e mesmo assim mesmo componente no renderizar novamente esse Valor não estiver aqui nessa nesse dependência e se ocê memo não vai ser executado novamente então o resultado dessa função aqui fica acordada e memória e aí quando o componente atualizado a gente vê beleza alguma alguma

coisa aqui tá essa dependência mudou se não tiver mudado a gente simplesmente vai pegar o valor que já tava salvar memória ele vai usar ele como valor atual sem alguma coisa dessa lista aqui mudar no caso este não lembro Quando a gente fica implemente por exemplo ou deixou chegar aqui é preciso entender então quando a gente ficar entrar mente o não vai mudar então como esse nome está na lista de dependência Aí sim a gente vai rodar essa função aqui novamente tá então cara só use mesmo quando você tá tendo problema de performance você pode

estar pensando por Felipe então eu vou usar o Easy mesmo para tudo mas não faça isso cara porque porque ele vai guardar o valor dessa Função aqui em memória então se você colocar tudo em um e a memória da sua aplicação vai chegar uma hora que vai ficar muito cheia de coisa que você não precisa então neste exemplo aqui essa função ela realmente demora um grande tem para ser executada né esse fora aqui é algo que custa bastante performance então neste caso como a gente tá tendo prometi performance Aí sim a gente use você mesmo

então mais uma vez só para ficar claro para você se você tem uma Função que tá lenta que tá travando sua aplicação que tá prejudicando muita performance aí você use mesmo se a função não tá fazendo muito Impacto negativo na performance não precisa usar Tá bom cuidado ao usar ele porque o Hulk mais avançado o Hulk que ajuda na performance mas apenas quando bem utilizado OK agora a gente vai aprender um Hulk chamado Wheels colbeck que é bem parecido com o Easy mesmo a gente também usa ele para resolver problemas de Performance tá então a

gente tem um probleminha aqui tem esse cenário aqui que eu preparei vamos ver o problema desse cenário é a gente vai resolver esse problema com o e os colbeck Ok então o que que essa aplicação Zinha que faz basicamente a gente tem esses três botões aqui e quando eu clico em comments ele faz um frete para uma pele pegando os a pressa dias um placeholder aqui pegando esse vestido está aqui no caso quando a gente clicar em comente Esse resource Type vai mudar para comem se Beleza quando a gente clica em tudo se ele faz

a mesma coisa mais para todos e para Puxe a mesma coisa mais para post beleza e essa função aqui ela é passada como próprio para essa listra aqui esse componente que faz a solicitarem aqui dos itens E aí essa lista eu dei o controle nela ela basicamente vai nos 17 aqui sempre que essa guia de viagens mundo aqui essa função aqui que faz essa comunicação comprei ela vai chamar essa Gatinha aí vai aguardar o resultado aqui dentro do state E aí vai mostrar esse state aqui para fazer um up nele mostrar Um item para cada

é um parágrafo né para cada insistente e qual que é o problema aqui galera o problema seguinte Vamos abrir o console aqui para mostrar uma coisa para vocês eu coloquei um console. Logo aqui ó Então sempre que essa função ser chamada a gente vai logar essa mensagem aqui no console e qual que é o problema aqui cara eu tenho assim puxe Aqui que ele basicamente Atualize o Station o velho dele é esse Text e aí quando a gente muda essa hein o chefe alterado para o valor do input então quando eu mudar isso aqui para

atenção que vai acontecer eu coloquei a e essa função ela foi chamada novamente porque porque quando esteja atualizar novamente componente renderizar novamente e essa função aqui ela vai ser recriada cara então a gente vai recriar essa função e aí a gente vai cair nesses reflete aqui Por quê Porque a função vai ser recriado então esse o CEFET aqui ele vai ser chamado então o que que vai acontecer cara sempre que a gente colocar alguma coisa que nem a gente vai chamar novamente porque porque essa função vai ser recriada esse é o comportamento padrão tá sempre

com o componente é atualizado todas as funções que estão presentes aqui dentro desse componente são recriadas então consequentemente a gente vai cair nesses reflete aqui e Consequentemente a gente vai chamar função e aí sim a gente vai se comunicar com a nossa ap Então cara sempre que a gente mudar esse input aqui a gente vai chamar uma isso é horrível Você concorda porque a gente só quer chamar essa função aqui se a gente mudar o senhor site aqui né que a única dependência dela então se a gente mudar de posts para comuns por exemplo E

aí sim a gente quer chamar essa função Aí sim a gente quer que caia nesse o CEFET aqui mas se A gente alterar o input carente não quer que isso aconteça Então como que a gente resolve isso a gente resolve com o ilsi callback Tá então vamos fazer o seguinte eu vou pegar toda essa função aqui OK e eu vou deletar esse aqui eu vou importar o Easy colbeck aqui doente Tá então e os codec a beleza e agora eu vou chamar os cobec SOS como é que ele vai receber dois parâmetros o primeiro vai

ser a função e o segundo vai ser a lista de dependência Assim como a gente tem nesse mesmo e no 17 agora eu vou colar todo o código aqui e nessa lista aqui de dependência a gente vai colocar tudo que a gente quer olhar tudo que a gente vai ficar escutando então pô eu quero que essa função aqui seja recriado então lembra dessa palavra recriada eu quero que ela seja criada sempre que cursor sai para mudar caso contrário senhor sabe não usar essa função não vai ser recriado ela vai ser guardada em memória Ok então

Segue a comigo Olha que vai acontecer agora eu vou salvar ele deu uma aqui porque aqui precisa ser a cinco não é porque o seu Awake aqui então assim que beleza agora dá uma olhada no que vai acontecer eu vou abrir o console novamente tá e eu vou mudar aqui um pote e olha a marcha cara função ela não foi chamada novamente porque galera porque agora essa função só vai ser recriada se esse ver solicitar de mudar se o componente atualizar com essa mudança de State aqui que a gente está fazendo nesse imposto e os

callback ele vai ver o beleza a gente foi atualizado mais Victor scipii o cara que tá aqui na minha lista de dependência não mudou então eu não vou recriar função eu vou pegar aqui eu havia guardado em memória anteriormente e vou basicamente replicar ela não vou recriar e consequentemente esse o CEFET aqui não vai ser executado novamente Então olha a mudança cara que a gente conseguiu fazer usando o e os Callbacks basicamente a gente consegue guardar uma função e memória e essa função ela só vai ser recriada se algum destes itens aqui mudar Tá bom

então você vai usar os cobec sempre que você tiver uma função que você tá passando como própria aqui por exemplo e essa função Tem algum tipo de processamento que leva um tempo que se executado sempre que o componente ainda usado novamente vai causar um problema de performance como aqui a gente tem uma Chamada para aplicar eu não quero que a gente chama um apê imagina sempre que você alterar o input você chamar um aplicar isso é horroroso então neste caso o eschbach é uma boa e ele é bem parecido com o exame Qual que é

a diferença entre os dois o uso de callback ele vai guardar em memória a função incite e os mesmo ele vai aguardar em torno dessa função e memória então por exemplo aqui é cigarette itens é uma função certo aqui a gente pode até Passar parâmetros para ela como por exemplo cinco aqui eu posso Ágatha e tem cinco e aí a gente pode receber esse número aqui por exemplo e a gente pode dar um blog aqui ensinando então Wilson Beck ele vai guardar para gente a função e memória encontre os mesmos aí vai aguardar o resultado

da função e memória tá então frente abrir aqui o console por exemplo ver aqui isso é lá colocar comente aqui ó ele guardou o número cinco então e os callback guarda a Função e o Islã aguarda retorno da função então quando você tiver uma função cara então eu sei que é um pouco confuso eu sei que às vezes a gente não tem aplicabilidade Mas pensa assim eu tô passando uma função como próprio para algum componente eu tô nesse caso aqui beleza essa função ela tem algum custo grande performance Nesse caso tem ela faz uns é

tipo uma te isso é um custo grande do vídeo performance agora terceira pergunta essa função está sendo Executada desnecessariamente sim o nosso caso sempre que a gente mudava o input a beleza aí sim eu vou usar o Easy callback Tá bom então essa Esses são os casos de uso aí que você usa o e os cobec sei que pode estar um pouco confuso aí que você pode estar confundindo com o cara com quanto que os rios couber quanto que eu uso os mesmos e se você tiver nessa situação se faça as três perguntas que eu

acabei de mencionar para você volta assistir a Explicação do isso mesmo novamente que você vai conseguir entender uma hora ou outra se você se dedicar Beleza então é isso galera o Escobar que os mesmos são bem parecidos ambos a gente usa aí para otimizar a performance as nossas aplicações são ruins muito úteis Aí caso você saiba usar eles corretamente isso foi o que eu acabei de ensinar para você beleza agora a gente tá pronta para ir para o próximo Hulk Então bora lá agora vamos aprender sobre o Hulk aqui muita Gente não conhece que muita

gente não sabe para que que ele serve eu vou ensinar isso para você agora esse Who kills layout e fé que ele é muito muito parecido com o Ivete mas ele tem uma diferença crucial Então vamos recapitular rapidinho o que o que usa effect faz ele basicamente vai executar um bloco de código sempre tem alguma dependência que que a gente define nessa lista muda Então nesse exemplo aqui eu tenho hoje e sempre que eu mudar esse Carro que eu vou dar um ok nele no console então por exemplo se eu der um implemente aqui eu

vou jogar descalço no console porque ele vai cair aqui no CEFET agora se eu mandar esse cara para o Slayer Flex Vamos ver que que vai acontecer então importei os levar à frente aqui dormir aqui coloquei aqui beleza agora vamos aqui no console e a gente vai ver que o resultado é absolutamente o mesmo não mudou nada Mas qual que é a grande diferença entre os Dois a diferença galera Ó fiz a nossa em algum lugar que é importante a diferença crucial seguinte o useeffect ele vai ser executado depois que o Don já tivesse ido

montado pelo IEC enquanto illsley horas é que ele vai ser executado antes do Dom ser montado por aqui tá bom então vamos outro exemplo aqui no caso de um ser montado pelo recte Ok então vamos ver outro exemplo aqui que vai ficar mais fácil para a gente entender eu vou importar esse modal aqui que eu fiz no Nosso index Então vou comentar o é Portal modal Ok se comentar aqui beleza esse cara aqui é um código um pouquinho confuso mas vocês não precisa entender 100 porcento está com o OK mas basicamente eu guardei um instante

aqui se o modal está sendo exibido beleza eu criei o Pati aqui que vai ser mudar o Henrique vai ser o F né para esse modal e creio o botão que vai ser o botão esse elemento do botão e aí nesse o CEFET aqui eu coloquei o show e aí basicamente Se a gente tiver mostrando se o senhor estiver tio eu vou pegar o pote e eu vou acertar o top dele para o Bottom do botão aqui o que que esse cara vai me dar o elemento do botões então vou ter acesso ao Barão dele

e eu vou colocar mais 25 então basicamente eu vou mover o pop-up um pouco para baixo vamos ver se mudar um pouco para baixo Então vamos ver como que você que vai funcionar com o Zezé qual presta atenção aqui ó pretensão e eu deixei em câmera lenta Aqui para você conseguir ver melhor tá você percebe aqui primeiro a mensagem aparece e depois ela vai para baixo você percebeu por quê que isso acontece porque o CEFET ele é executado depois que o dom é montado então se eu quiser fazer essa alteração aqui no Dom Então quando

você vai usar o layout frete quando você quer fazer uma alteração no Dom baseando-se no Dom tá Então nesse caso a gente quer fazer uma alteração no top aqui do pop baseando-se no botão Aqui do batom e a gente quer que isso aconteça já quando a página ser montada Então a gente vai usar o Leal reflete aqui e dá uma olhada que vai acontecer bom então vou usar a Pet aqui e agora quando eu clicar no no toda mudam ele já vai Aqui para baixo direto porque porque esse cara que vai ser executado antes do

Dom ser montado então no caso Antes desse cara aqui ser montado a 500 dessa Dias ser montado E aí ele já vai mudar esse toque aqui beleza do pop E aí sim o Papai vai ser exibido na tela Então a gente vai mudar o top dele e aí sim ele vai ser exibido na tela porque o usuário fake vai ocorrer justamente nesse período nesse período anterior a inserção objetos mudam Ok então usa esse cara aqui quando você quer fazer uma alteração do Dom como a gente fez aqui beleza você vai usar ele bem pouco sendo

bem sincero assim pouquíssimas vezes eu precisei usar ele mas eu acho legal você conhecer porque é um Hulk como eu falei Pouquíssimas pessoas conhecem pouquíssimas pessoas sabem para que ele serve então achei bacana passar para você beleza então galera esse foi o vídeo espero que vocês tenham gostado Espero que o que eu passei aqui tenha conseguido agregar algum valor para você se lembre que daquele compromisso o cara que a gente fez no começo se você curtiu se você achou que algo que eu passei aqui agora e você como eu falei deixa o seu joinha aí

e se inscreve no canal Para não perder os próximos vídeos e também pra me motivar cara a continuar trazendo conteúdo toda semana aqui sobre programação para você e se você quer ainda mais conteúdo começo aqui só que diariamente Me segue lá no Instagram que eu vou deixar aqui na descrição o link lá eu posso conteúdo todo dia sobre programação tira dúvidas de vocês os Stories Então a gente vai ter um contato mais próximo beleza faz uma vez espero que vocês tenham gostado do vídeo eu Fico por aqui até o próximo vídeo tchau tchau um