você consegue perceber alguma coisa estranha dentro desse componente aqui esse US effect Ele parece meio esquisito não acha então a gente tem um effect que tem uma rede de dependências que são próprios desse componente e dentro dele a gente tem aqui esse set state sendo disparado então né tá tá estranho isso daqui né como é que a gente poderia resolver esse problema aqui e primeiro né isso aqui ele é um problema sim ou não deixa nos comentários aí bom ele é um problema claro né E esse aqui pode até ser considerado um antipattern tá então
é sempre bom a gente evitar esse tipo de situação onde a gente tem uma chamada de um set state dentro de um use effect tá a gente já vai entender o por que isso aqui é considerado uma uma prática tá Vou atualizar aqui atualizei beleza E aí o que acontece tá já vou te mostrar o que que tem aqui embaixo né para te mostrar os inputs ali do formulário Mas vamos lá vamos entender aqui então a gente tem basicamente um uma página aqui um componente que tá servindo como página tá ele renderiza aqui esse nosso
componente tá como shre passando algumas props para ele imagina que essas props elas venham de um serviço externo ou algo assim beleza show de bola e aí por sua vez esse componente ele pega essas props executa dentro do um Us effect para atualizar o estado e renderizar ali no os inputs do formulário tá primeiro né a gente já tem alguns problemas aqui quando a gente tá usando esse value e a gente precisa passar o on Change que aí ele se torna um componente controlado tá existem basicamente dois tipos de componentes aqui de formulários por exemplo
não só formulários né mas principalmente de formulários aqui são os componentes controlados e os componentes não controlados tá tem vídeo aqui no canal explicando a diferença entre eles e mais detalhes mas basicamente aqui quando a gente tá controlando de fato o valor do input então a gente precisa aqui passar o onchange para ele tá a gente já vai criar isso daqui mas segura aí que a gente precisa ainda entender esse lance aqui do use effect tá vamos lá eh eu tenho um arquivo de research aqui ó pra gente entender um pouco melhor o que que
tá acontecendo tá bom a gente tem lá lembrando né no nosso exemplo a gente tem um use effect E dentro dele a gente tem uma função de set state sendo disparada fechou bom aqui a gente tem basicamente as três etapas dos componentes aqui né do ciclo aqui do Flow né do react hooks tá que é a montagem a atualização e a desmontagem tá Segura esse esse laser initializer aqui que a gente já vai falar sobre ele e ele é o cara mais importante do vídeo aqui agora tá só que daqui a pouco a gente vai
entrar em mais detalhes tá então quando o componente ele Monta ele executa primeiro esse cara depois ele executa a parte de renderização e eu vou pular essa parte aqui ó porque essa parte é referente ao Hook layout effect effect né ao use layout effect Beleza não é o nosso caso a gente não tá utilizando ele agora mas a gente tá utilizando o use effect então essa parte em amarelo aqui é importante pra gente tá então primeiro ele executa esse la initializers renderiza depois o browser ele pinta ali a tela roda o cleanup e depois roda
o efeito o que que seria cleanup é a função que você retorna dentro do use effect tá que também não é o nosso caso agora a gente não tem uma função de cleanup ali então a gente vai ter é isso daqui né e os ah efeitos sendo executados né o efeito nesse caso aqui seria esse set state Qual que é o problema vamos entender o comportamento aqui quando o componente esse componente ele é montado ele vai executar esse use effect certo porque a dependência aqui ó a primeira vez que ele receber que as próprias ali
nesse caso são fixas né mas imagina que seja um api né que venha de um api externo mas toda vez que essas props mudarem ele vai executar esse use effect de novo que por sua vez vai executar um set state que por sua vez vai causar uma renderização então aqui a gente tem renderizações desnecessárias tá isso aqui cara pode dar vários problemas para você na parte de debug imagina que isso aqui seja um componente maior Imagina que uma também eh um outro exemplo que talvez você tenha até mais de um use effect no componente Então
vai ficando cada vez mais difícil de debugar esse tipo de coisa aqui tá bom qual que seria uma alternativa Então agora que a gente já entendeu pelo menos o problema aqui né qual que seria uma alternativa primeira coisa a gente poderia aqui nesse caso passar uma vez que você quer Qual que é o por que que a gente tá utilizando esse US effect aqui né por que que a gente escolheu essa alternativa aqui basicamente porque às vezes a gente precisa ah atualizar a página com o valor atual ali né que vende uma propriedade por exemplo
para mostrar pro CL porque lembrando isso aqui pode acontecer de forma pode não na maioria das vezes vai acontecer de forma assíncrona e às vezes o seu input ele vai acabar recebendo valor internamente porém pode ser que não e seja renderizado esse valor ali pro usuário então internamente ele tem esse valor se você der um submit esse valor vai ser vai ser enviado ali no submit porém pro usuário vai ter vai ser como se tivesse vazio Tá e isso é um problema tá bom como é que a gente resolve isso daqui isso aqui né é
uma solução Mas é uma solução ruim então não recomendo fazer esse tipo de coisa então como é que a gente poderia resolver isso aqui de uma forma muito mais simples eu vou apagar isso aqui tá E aqui ó a gente já pode passar por exemplo direto tá então quando você tem esse tipo de necessidade parece Óbvio mas na maioria das vezes a gente acaba recorrendo aí os effect de primeira tá então se você fizer esse tipo de coisa aqui se eu atualizar a página você pode perceber que continua funcionando da mes mesma forma tá agora
como é que a gente pode fazer aqui para corrigir esse lance do do componente controlado aqui né bom a gente pode criar aqui por exemplo uma pode ser uma constante pode ser uma função tá tanto faz que é mais questão de gosto do que qualquer outra coisa Tá então input Change por exemplo e aqui ele recebe um um evento né Daqui a pouco a gente já tipa esse evento aí mas aqui a gente precisa entender algumas coisas tá então eu vou pegar um se deira que é o meu atualização do meu estado ali se deira
E aí ele é um objeto certo Qual que é o correto a gente fazer aqui imutabilidade lembra então a gente faz um spread aqui do que já tem lá no nosso objeto e atualiza Com base no evento ponto target Lembrando que esse evento aqui ele vai vir do do do input tá então aqui a gente deixa de uma forma mais dinâmica você não precisa criar um para cada input tá essa é a ideia então a chave aqui do valor imagina que a gente tem aqui Um Valor tá a gente tem uma chave objeto né a
chave aqui vai ser o name do input e depois o value dele tá como é que a gente pega isso dessa forma então event targetname vou receber O Event target P value Tá eu vou Fechar isso aqui vou passar isso aqui para cá então on Change e vou fazer a mesma coisa aqui para baixo tá feito isso tá reclamando ali por questão da tip a gente já vai resolver isso daqui mas se a gente ver aqui agora e atualizar Tá tudo funcionando beleza bom como é que a gente tipa isso daqui agora né aqui é
mais typ scpt agora do que qualquer outra qualquer outra coisa tá aqui eu vou dar uma dica para você você pode usar aqui o Change event tá e passar aqui um genérico para ele tá Qual que é o genérico desse caso aqui é um input tá como é que eu sei então HTML putut Element beleza e aí agora você já tem a sua tipagem aqui a gente não precisa desse use effect mais agora a gente tem o mesmo resultado que a gente teria antes tá com na verdade sem o user effect beleza e aí voltando
aqui pro nosso diagrama esse las initializer aqui eles são exatamente essa parte aqui ó é essa esse default que a gente passa aqui pro use state tá e aqui a gente pode até forçar ele a ser cara ele acontecer extremamente antes de tudo tá então ele sempre vai ter o valor atualizado quando o componente já for renderizado em tela como é que a gente faz isso você pode passar aqui ó uma função tá E aqui ó posso fazer dessa forma aqui tá então eu passo uma função que já me retorno o objeto e aqui isso
aqui ó eu garanto que ele sempre vai ser executado primeiro antes de de tudo olha só onde que o o o o o use effect iria executar e o use layout effect também iria executar ele acontece antes cara é a primeira coisa tá então isso aqui ó ajuda demais nessas situações que você precisa já entregar aqueles valores prontos na hora da renderização ali dos seus componentes na no Browser Beleza então se você curtir esse vídeo pô deixa seu like seu comentário compartilha tá isso ajuda demais e se você quiser se inscrever no canal e ajudar
a gente cada vez mais pô tem o botão de se inscreva-se aí agora beleza então é isso galera Valeu falou grande abraço e até a próxima [Música]
