Duas regras que você precisa cumprir com hooks no React

Hooks são formas extremamente simples de adicionar comportamentos a componentes no React, mas existem algumas regras que você deve seguir quando utilizar essa API.
Mas, para isso, temos que aprender como os hooks funcionam por baixo dos panos e entender o que são closures no JavaScript.
Nesse vídeo mostro detalhadamente como o React se comporta quando declaramos um novo hook dentro do componente.
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial

[@luanmedeirossilveira]

Fala Diego! Continua trazendo conteúdos desse porte que ajuda muito a galera. Abraço!

[@dieegosf]

Pode deixar!

[@GabrielManussakis]

Esses vídeos com conceitos mais avançados são muito importantes para a comunidade! Parabéns!

[@dpisati]

Maravilhoso video Diego!! Mais videos assim sao muito bem-vindos! 💖 Explicar o funcionamento da programacao de uma forma mais pura, sem frameworks (ou o que o framework faz por baixo dos panos - como esse video). E conceitos basicos, porem essenciais, como closures, recursion, recursive, curry e etc... Obrigado pelo conteudo! 💖💖

[@SouAndersonDavid]

"Ou classes como faziam os Incas e Astecas" KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKk

[@DanielRios549]

Essas regras dos hooks é uma das coisas mais chatas no React, vamos ser lógicos, não existe hook, isso é só um nome bonitinho, o que existe são apenas funções que vc chama como qualquer outra

[@guilhermelourenco977]

Você poderia trazer um conteúdo sobre Autenticação social + via Api na mesma aplicação abordando a melhor estratégia de se fazer isso 🚀

[@ebratz]

Muito bom ver a Rocketseat avançando em conteúdos com mais profundidade! Já existem muitos conteúdos para iniciantes ou nível intermediário e poucos conteúdos bons de nível avançado, principalmente em português.

[@marcelosilvadias3902]

O famoso "prevState" rs .

[@nickolassilva8994]

Salve Diegão!!! Massa demais esse conteudo, era um dos pontos que eu não tava entendendo... "now everything makes sense!" ||| e não é por nada, não, mas parece que, ou o filtro ta estranho ou o Diegão não dormiu direito kkkkkk Salve equipe da rockets, Abraço!

[@jonatascarvalhoborges6175]

Ganhou meu "laique" nos incas e astecas hahahaha

[@renatorodrigues2774]

Fala Diego, Obrigado pelo Video. Eu já sabia que não podia Usar, mais me convenci agora porque.

[@IgorRP12]

Excelente vídeo, acho que tão importante quanto saber usar a ferramenta, é saber como ela funciona "por de baixo dos panos" para saber também suas limitações, acho que seria interessante, talvez junto do vídeo ou em uma série separada, mostrar como tu chega a essas conclusões, seja fuçando no pacote do react ou documentação/fóruns para que a gente também possa aprender a como ....aprender?? haha mas super apoio essa série "É errando que se aprende". Valeu Diego, valeu Rocket!!

[@jon1996xd]

Vídeo pra ser visto mais de uma vez! Esses conceitos são muito importantes e acredito que todo mundo que já brincou com o react já gastou um tempo por causa desses "problemas"

[@gleisonrj19]

Descobri quando precisei fazer uma paginação e tive que pegar o prevState kk

[@afonsocarvalho3124]

Então, quando vc faz uso de um componente, apesar de ele já ser escrito como se fosse uma função, ele será transformado em uma outra função no bundle.js, que receberá como argumentos as variáveis do seu componente, inclusive as funções, que serão, naturalmente, um callback (ou delegate como faziam os incas e astecas xD ). VAleu, Diego!

[@andresdosantos5310]

Vi isso no Ignite

[@VitorCPSsss]

Rapaz, acabei de salvar o vídeo "3 coisas que você precisa dominar pra aprender React", agora eu chego aqui e saiu o "Duas regras que você precisa cumprir com hooks no React". Acho que é o destino falando pra eu focar mais no React Native, Web eu ainda prefiro 1000x o VueJS.

[@rodrig0krvalho]

Muito show!

[@Cristian7Bitencourt]

Trabalho com React a um ano e não tinha parado pra pensar nisso, muito massa, clareou as ideias!!!!

[@thiagonunesmiziara6866]

Muito bom poderia fazer um de zustand

[@rodrigomartins9115]

Opa, quais sao as configurações de ESLINT e Prettier você usa?

[@223brunoleo]

Fantástico! Como acho isso na documentação?

[@dieegosf]

pt-br.reactjs.org/docs/hooks-rules.html#explanation

[@marcelolupatini5553]

Vídeo bom

[@devemprender]

Gosto de sempre usar Call back function no useState quando estou utilizando o valor antigo. Esse problema pode acontecer tb quando estamos tratando um valor async tb.

[@renatomarxs]

Top

[@felipekawassaki]

Top!

[@alexalannunes]

testei e com useCallback tambem não funciona. :) .Entendido com sucesso

[@jailsvs]

Boa Diegão! Parabéns pelo conteúdo!

[@ruthmariia]

Ótima explicação! Mas essa música de fundo me atrapalhou um pouco, era melhor quando vocês não colocavam música de fundo nos vídeos.

[@dieegosf]

Obrigado pelo feedback

[@guilherme-ji8ly]

eu nem percebi a música de fundo sinceramente

[@michaelbarbosa7893]

When I've started producing I personally have downloaded most of the plugins from there, never had problems with virus, malwares and

[@vitoroliveira8028]

Please...get a MPC and lear how to really PRODUCE!

[@compilacaodememesnovos8353]

I'm convinced that the big investors and analysts are trying to scare us to keep us poor and ignorant to the market.. because its steady

[@pliniohavila]

Boa! Agora, eu sei que para modificar o valor do estado mais de uma vez, eu tenho que alterar mediante a seguinte função: steCount((count) => count + 1). Porém não entendo o que está acontecendo "debaixo dos panos"? Poderia fazer uma vídeo explicando? Muito Obrigado. Parabéns pelo conteúdo...

[@PedroHenrique-je6yu]

mano, pelo o que eu entendi no vídeo, ele executa uma função. Assim como caso você passasse apena setCount(count + 1), onde count é um valor fixo, a função se executará setCount(state => state + 1), onde state é sempre o valor anterior.

[@mateusmoura1774]

life is life la laa - la la la bruh

[@RicardoTrevisan]

🚀🔥🔥🔥

[@weslleyfillipe1532]

Uma coisa sobre hooks condicionais que eu nao entendo é tipo, por exemplo: quando eu uso o graphql no front com react, eu nao posso fazer a chamada do 'useQuery' dentro de um if. A minha ideia na epoca era criar um unico hook personalizavel que executasse uma query de acordo com o parametro que vinha, porem como eu nao podia colocar dentro de um if ou switch case, acabava tendo que criar um hook pra cada funçao. No exemplo do video, mostrou no caso do hook nao ser criado numa segunda renderizacao (qd for false), porem no meu exemplo, um useQuery sempre seria criado, mas o ESLINT nao me deixava fazer kk. De qualquer forma, optei por nao usar graphql no front pra evitar esse tipo de coisa

[@edvaldojose.7756]

Cara isso e D+, muito bom meu velho, excelente conteudo.

[@ernestoneto9166]

Muito interessante isso, foi bom aprender antes de tentar fazer isso kkkkkkkkkkk

[@uamhenry522]

What do I do when the channel rack becos too cluttered? If I can, how do I clear it?

[@BlackListRF]

Conteúdo top ein Diegão, e esse teclado ein, já faz uns meses que ta nessa kkkkk

[@dieegosf]

Consegui resolver essa semana! (não da forma que eu queria, se é que me entendes hehe)

[@MatheusPereira-nn9dj]

o que voce esta usando no tsconfig para voce nao precisar definir tipos na sua aplicação react ???

[@busster_6611]

You are dope bro! Damn , thank you so much, subbed

[@jeffersonbueno1168]

foda, sabia que não funcionava mas não sabia o porque rs

[@cirogomes5330]

Dá pra dar um setCount e logo em seguida já usar o valor atualizado de alguma forma, sem precisar salvar esse valor numa variável? Por exemplo esse código: const newCount = count + 1; setCount(newCount); setCrazyState(newCount * 2); Seria possível fazer assim? setCount(count + 1); setCrazyState(count * 2); //com o count atualizado

[@cirogomes5330]

Respondendo minha própria pergunta, dá pra fazer algo tipo assim 🤔: setCount(count => { count++; setCrazyState(count * 2); return count; });

[@FAELP22]

Legal a dica, tenho uma pergunta, como vc faz para colocar sua câmera na tela?

[@gilbertsilva5959]

⚛

[@danilovieira4442]

13:11 Quando o cara sabe como aproveitar os limões da vida hahaha

[@rafacapoci1757]

Estava com esse "problema" a umas duas semanas, esse video teria me poupado muito tempo hahaha

[@ygortf]

Esse formato é muito daora!! Excelente vídeo

[@Pedrooedrpziul]

Conteúdo Fenomenal !!!!

[@victorpagnozi4736]

Fala Diego, qual o modelo de câmera que vc utiliza ?

[@lukscsas]

mano, esse video E X P L O D I U minha mente... parabens!

[@jonatasrosamoura9666]

Muito bom, já sofri a lot por causa desses erros de hooks do react kkkk

[@vane_8994]

Baita conteúdo! 🚀👏

[@giovanny1850]

"ou classes como faziam os incas e astecas" me quebrou mt mano KKKKKKKKK

[@adrielschmitz]

Excelente explicação! Se eu tivesse tido uma explicação visual assim lá nos primórdios dos hooks teria me polpado um baita tempo!!

[@0625010042]

Show de bola! Conteúdo de muita qualidade. Parabéns Diego!!!

[@rafaelluzz7889]

MY GMS DOES NOT soft LIKE YOURS

[@maxwellalves6492]

Muito legal man, como pode fazer tanto sentido kkjkdkdkk eu gosto muito, e a função do useState, poder receber uma função com parâmetro do último estado da variável mudou minha vida kkkdkdk

[@xxxx3657]

Best guy how did u get it, what torrent did u use

[@raimundojunior8547]

Valeu Diego, estava com dificuldade de entender no ignite, por aqui você esclareceu tudo, obrigado mesmo pela ajuda

[@Viiikto]

Sensacional, adorei o lip tint

[@bigardibatera]

O que vc usa de software pra sua câmera nesse formato na tela e esse follow que deu no seu rosto qndo mudou de lado e a câmera buscou vc?

[@danielantunesrocha545]

TB tô curioso pra saber

[@dieegosf]

github.com/maykbrito/mini-video-me

[@rogi9696]

Me parece que quando ele mudava de lado, ele mesmo ajustava a imagem

[@ruanlandrade]

Amei o batom e o conteúdo, continua Diegão kkkkk

[@dieegosf]

Que bom que gostou, está na minha paleta :)

[@crazybr9630]

Does it support for windows 10?

[@CaiqueMoraes93]

Excelente vídeo Diego! Gosto muito do seu conteúdo e didática

[@EduuuardoRodrigues]

bro where have u been, it is so cool

[@gustadev276]

Vídeo muito bom, sempre bem Diego!🚀

[@sashizosh]

Diego, no último exemplo que você faz a referência do state, nesse caso ele só renderiza o componente uma vez ou 5? Tipo, ele espera a função concluir todas as linhas pra dai triggar o rerender ou ele vai triggar 5 vezes porque chamou o setState 5 vezes? Obs: Isso que estou falando é independente se o valor alterou 5 vezes ou não.

[@dieegosf]

Ele faz uma vez só, isso se chama Automatic Batching que sempre foi feito sozinho e na última versão do React temos o batching também funcionando dentro de código assíncrono (reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching).

[@MarcusVinicius-wz6es]

Fala Diegão! Poderia falar sobre o erro: "Can't perform a React state update on an unmounted component", por favor!!!!! Adoro o conteúdo da Rocket!

[@felipecabreira4321]

Ótima didatica, video muito bom !

[@brenodias6323]

Thank You So Much Bud

[@lorenamelor]

Excelente! 👏🏻

[@fellipeemanoel3040]

Video curtinho mas recheado de conteúdo!! Showww

[@victorkihs4415]

Thanks so much bro.

[@johnrodrigues559]

Muito bom, Brabissimo

[@lucasi-cs]

Qual a configuração do navegador que grifa o componente quando ele é renderizado? Vi em um video como ativava mas esqueci

[@dieegosf]

React DevTools e dai nas configs tem uma opção "Highlight componentes when rerenders"

[@lucasmedeiros391]

Top demais Diegão!

[@darlonhenrisouza8555]

excelente aula diegão

[@MDKohaku]

A Rocketseat salvando dnv

[@wagnersobreira8703]

Boa diego!

[@davibergamin5943]

então é por isso que eu não posso simplesmente chamar a função setCounter no corpo da função do componente e fora de um evento? porque quando eu chamo a função setCounter o componente é re-renderizado e a função ele vai entrar em um loop infinito?

[@dieegosf]

Exatamente

[@esdrassalatiel4673]

bangers lodies.

[@thomaspalmieri3754]

it really works!

Muito bom!

[@albuquerquedev5200]

Show!

[@italofsan]

Excelente vídeo!

[@rmscrisostomo]

Caí hoje, descobri neste vídeo o porque 😂😂✌️. Obrigado pelo conteúdo.

[@vitorsantana2795]

Sensacional Diego!! Explicação super didática e fácil 👏🏾

[@saphiraxavier426]

me ajudou muitoo

[@ValterNeto]

Conteúdo massa! Já caí várias vezes nesse erro e fiquei muito putaço hahahah . Agora eu saquei, agora entendi! Valew e parabéns!

[@marlonlamancio]

Como sempre excelente conteúdo! Obrigado! Só uma sugestão, a música de fundo está muito alta nos vídeos, distrai bastante

[@gabrieldurr3037]

excelente 👏👏

[@fabiogoncalves8597]

Excelente vídeo, conteúdo extremamente relevante. Estou acostumado a usar o Vue.js e, ao alterar uma variável dentro de uma função, na sequência eu já consigo fazer uma operação com o valor atualizado. Demorei pra perceber que no React o funcionamento é diferente e o seu vídeo explicou muito bem o porquê. Sensacional!

[@pablopereira5893]

não passei por esses problemas ainda, mas é bom ja saber de antemão... vlw... belo video.... "Hey marcas de teclado!! Esse homem precisa de um teclado novo!"

[@khyquer]

Show!!!

[@adrianomedeiros4068]

Cara eu estava passando nesse problema do setState igualzinho e não estava entendendo... Muito obrigado

[@JeanSilvany_]

Tomei martelada o vídeo todo, mas esse final aí fez um milagre! Boa Diogão!!!

[@yagojuan4041]

Meu cérebro explodiu agora hahaha. Sabia que ele não deixava fazer isso, mas não sabia o porquê. Muito bom!!

[@matteusalvesofficial]

BEEST!!!