React Hooks: Aprenda os MAIS IMPORTANTES em 50 Minutos!

Поділитися
Вставка
  • Опубліковано 30 лип 2024
  • 🚀 Bora desenvolver um CLONE DO IFOOD em 5 aulas gratuitas? Toca no link e participe comigo! swiy.co/yt-c-fsw4
    Neste vídeo vamos aprender todos os Hooks mais importantes do React!
    Código: github.com/felipemotarocha/re...
    --------------------------
    PARTICIPE DA NOSSA COMUNIDADE NO DISCORD:
    / discord
    SIGA-NOS NO INSTAGRAM:
    / byfeliperocha
    RECEBA DICAS NO TELEGRAM:
    t.me/dicasparadevs​​
    --------------------------
    ASSISTA AOS MELHORES VÍDEOS DO CANAL:
    ▸ CURSO DE REACT PARA COMPLETOS INICIANTES
    • Curso de React Para Co...
    ▸ CRIE UMA CALCULADORA COM HTML, CSS & JAVASCRIPT
    • Crie Uma CALCULADORA c...
    ▸CRIE UMA LISTA DE TAREFAS COM HTML, CSS & JAVASCRIPT
    • Crie Uma LISTA DE TARE...
    ▸CURSO DE HTML PARA COMPLETOS INICIANTES
    • Curso de HTML Para Com... ​
    ▸CURSO DE CSS PARA COMPLETOS INICIANTES
    • Curso de CSS Para Comp... ​
    --------------------------
    REDES SOCIAIS
    GitHub: github.com/felipemotarocha​​
    Nosso site: dicasparadevs.com.br
    --------------------------
    TIMESTAMPS:
    00:00 - Introdução
    00:49 - useState
    07:48 - useEffect
    16:38 - useRef
    23:23 - useReducer
    34:42 - useContext
    38:26 - useMemo
    42:40 - useCallback
    49:03 - useLayoutEffect
    52:29 - Conclusão
  • Наука та технологія

КОМЕНТАРІ • 109

  • @kelvinargolo2717
    @kelvinargolo2717 Рік тому +29

    Se você é iniciante(como eu sou), a dica é: ASSISTA EM 0.75X xD

  • @ronaldoriosespindola3716
    @ronaldoriosespindola3716 Рік тому +26

    Fui olhar na velocidade do meu áudio e achei que tava em 1.5 mas tava no normal ehuehuehuehueh
    Conteúdo muito top mano. Tava com dúvida principalmente do useReducer e o useContext e você me salvou com tua didática. Abração e parabéns!

  • @fernandohenrique5153
    @fernandohenrique5153 11 місяців тому +10

    Apesar de já conhecer todos estes hooks, foi o melhor video explicativo sobre os hooks mais utilizados do react que já assisti. Parabéns Felipe, brçs!

  • @larissamendes8026
    @larissamendes8026 2 роки тому +10

    Muito bom o vídeo!
    Pra quem achou que ele falou rápido, é só colocar na velocidade 0.75 aqui no UA-cam fica perfeito 😊

  • @marcos_freire
    @marcos_freire Рік тому +6

    Estou começando no React, tenho histórico com Angular e Vue, mas estava com dificuldade de assimilar esse conceitos dos hooks. Esse teu vídeo foi fundamental, parabéns pelo (muito) trabalho de fazer essa aula.

  • @giovanny1850
    @giovanny1850 2 роки тому

    cara é muito bom quando um cara faz um vídeo que sai um pouco do abstrato e coloca na pratica, parabéns pela forma de ensinar meu bom, voce é realmente sinistro.

  • @vagnerazevedo2014
    @vagnerazevedo2014 22 дні тому

    Sou iniciante em React e achei EXCELENTE o seu vídeo. Me tirou muitas dúvidas sobre os principais hooks.
    Obrigado por dividir o seu conhecimento conosco.
    Inscrito.

  • @johnnyjeverson6398
    @johnnyjeverson6398 Рік тому +1

    Foi o melhor que encontrei, direto ao ponto e didático simples e objetiva

  • @GustavoSilva-jx6fd
    @GustavoSilva-jx6fd 2 роки тому +2

    Eraa esse video que eu precisava mano, estou aprendendo react, ótimo video, Parabéns

  • @Cookieukw
    @Cookieukw Рік тому +6

    muito bom, já tô upado no react. se vc aceita sugestões, eu diria q vc deveria fazer mais um episódio de css e dessa vez ensinar a usar keyframes e animações

  • @matheusenrico9779
    @matheusenrico9779 2 роки тому

    Conteúdo muito bom! e o que eu mais gosto é que você faz de uma forma intensiva, parabéns pelo trabalho!

  • @rodrigohenrique7125
    @rodrigohenrique7125 2 роки тому +1

    É o melhor vídeo sobre hooks que já vi, me ajudou muito!

  • @antoniobarbosa9895
    @antoniobarbosa9895 Рік тому

    Muito obrigado por esse conteúdo! Objetivo, direto ao ponto, exatamente como eu estava precisando. 👏👏

  • @annalaramoraes3193
    @annalaramoraes3193 2 роки тому

    Me ajudou muito! Prático, direto e muito claro.
    Muito obrigada!

  • @edsonribeiro6135
    @edsonribeiro6135 2 роки тому +1

    E hoje, sem enrolação, um conteúdo foda!

  • @devmasterpablo
    @devmasterpablo Рік тому

    Mano que massa ! Parabéns pelo conteúdo, muito bem explicado, tantos itens em um vídeo só, muito muito bom mesmo, entregou muito valor, obrigado !

  • @espiritfox
    @espiritfox 2 роки тому

    cara, que explicação clara e objetiva!!! parabéns!!!

  • @user-qi2yi3yv8q
    @user-qi2yi3yv8q 4 місяці тому +1

    Cara, muito obrigado, obrigado mesmo, faz algumas semanas que comecei a estudar react e não tinha entendido muito bem os hooks, graças a você, deu um boom na minha mente. Valeu...

  • @paulorobertosallesdossanto6616
    @paulorobertosallesdossanto6616 2 роки тому +1

    Ótimo vídeo. Exemplos bem esclarecedores. Sugestão é você trabalhar mais a velocidade na sua fala. Lembra que seu público na sua grande maioria está buscando aprendizado e se você trabalhar a velocidade como você fala vai ficar perfeito

  • @userJuniorsilva
    @userJuniorsilva Рік тому

    Cara, seu conteúdo é sempre muito rico em informações, muito obrigado mesmo

  • @edudias1972
    @edudias1972 Рік тому

    Parabéns pelo resumo de Hooks e exemplos me ajudou bastante!

  • @eduardospek
    @eduardospek 2 роки тому +1

    Esclarecedor 👏🏽👏🏽👏🏽

  • @kab3l0w
    @kab3l0w Рік тому

    Maluco, q canal bom! explicação clara, simples e direto. bom demais!

  • @marcosdias2734
    @marcosdias2734 8 місяців тому +1

    50 minutos de muito conteúdo. 👏

  • @PlinioMabesi
    @PlinioMabesi 6 місяців тому

    Parabéns, ganhou um inscrito pela qualidade do conteúdo e ensino sem enrolação.

  • @Wesley-es1bm
    @Wesley-es1bm 2 роки тому

    Sou iniciante, mas com dedicação alcançarei o meu objetivo. A explicação é muito boa.

  • @eduardofagundesferreira8891

    Mais uma Felipe! Show de sempre! Valeu mesmo!

  • @felipequeiroz8008
    @felipequeiroz8008 2 роки тому

    Muito bom o conteúdo, parabéns!

  • @carlos-GMA
    @carlos-GMA 7 місяців тому

    Muito bom seu resumo, muito obrigado!!!

  • @leandrocassiano
    @leandrocassiano 8 місяців тому

    Gostei demais da aula! Obrigado por passar seus conhecimentos gratuitamente através do youtube!

  • @kaizenpunisher
    @kaizenpunisher 10 місяців тому

    Que aula sensacional... ta de parabens. Me ajudou demais. Merece minha inscrição e o like

  • @VitorSilva-qm3rk
    @VitorSilva-qm3rk 2 роки тому

    Para poder simular o componentwillunmount, você pode ir no devtools e ativar a função de preservar o log no navegador.

  • @matheusricardo6671
    @matheusricardo6671 Рік тому

    Tu é embaçado mano. bom demais

  • @samuelseve7449
    @samuelseve7449 2 роки тому

    Vc é muito necessário, cara.

  • @pablonicholassantos431
    @pablonicholassantos431 Рік тому

    que conteúdo excelente, parabéns mano!!!! \'o'/ já salvei na minha playlist, me ajudou muito, consegui aprender e já sair usando ahaha \'o'/

  • @tbvinicius
    @tbvinicius 2 роки тому

    Grande Lipão. Parabéns meu, teus conteúdos e tua didática são sensacionais.
    Vou deixar uma dica aqui para vídeos futuros para o caso em que não tenha pensado sobre. Esse vídeo em questão a fala ficou bem rápida, o que de certa forma não chega a ser um problema pois podemos reduzir a velocidade ou até mesmo assistir mais vezes. Agora teve uma coisa que foi bem difícil de acompanhar nesse vídeo, que foi onde você estava clicando com o mouse. De repente nós próximos ou em ao menos um dos próximos, você poderia utilizar aquela "bolinha amarela" que aparece em volta do mouse quando se clica em algo, ou algo que destaque mais a tua seta do mouse.
    Valeu!!!!!!!!!!

  • @tassioneves1002
    @tassioneves1002 2 роки тому

    Conteúdo muito bom fera!!!

  • @developerjs-jr8237
    @developerjs-jr8237 Рік тому

    Parabéns, didática muito boa e conteúdo excelente! 🎉
    Ganhou um escrito.

  • @PauloVitor-le6dz
    @PauloVitor-le6dz Рік тому

    muito bom o conteúdo, ajudou demais meu amigo!

  • @victorfranco2495
    @victorfranco2495 Рік тому

    Que didatica tooop meu amigo!

  • @joaberochadel8219
    @joaberochadel8219 6 місяців тому

    Excelente vídeo, parabéns.

  • @michel_silva
    @michel_silva Рік тому

    Caramba, muito show

  • @andersonsr.poliglota868
    @andersonsr.poliglota868 8 місяців тому

    Muito bom, Felipeee!!!

  • @thiagodejesus86
    @thiagodejesus86 9 місяців тому

    Cara você ganhou mais um inscrito. Parabéns pelo vídeo super didático.

  • @lucasvtiradentes
    @lucasvtiradentes 2 роки тому

    Conteúdo top mano!!!

  • @douglasmatos2134
    @douglasmatos2134 4 місяці тому

    Eu tô aprendendo React, teve muitas coisas que eu sacava fácil fácil, mas algumas coisas eu ficava completamente perdido. Principalmente por não saber exatamente o que alguma palavra chave faz, como nas dezenas de ".algumacoisa", eu ficava "mas q pohha é essa?" Kkk😅 tô aqui com pesquisando tudo e revendo o vídeo kkkkkkkk aula é muito boa! tem de ter um raciocínio apurado em alguns momentos, para ele já é fácil pela pratica. Pra gente que tá começando, é fácil se perder na explicação.

  • @Lucas-rf6yj
    @Lucas-rf6yj 8 місяців тому

    Muito bom, valeu!

  • @alevianna7885
    @alevianna7885 Рік тому

    Cara, muito massa.

  • @rafaelenv
    @rafaelenv 2 роки тому

    cara, muito obrigado

  • @BrenoNovelli
    @BrenoNovelli 10 місяців тому

    16:00 - pode usar o preserve console nas configs do dev tools

  • @Devertelo
    @Devertelo 3 місяці тому

    Que vídeo boa.
    Parabéns!!!

  • @LuizOtavio-lr7kc
    @LuizOtavio-lr7kc 8 місяців тому +1

    Sobre o "useRef" talvez tenha ficado confuso para mais alguém. Porque o react renderiza o estado anterior do component - Ex. teste = test, mas exibe o número de renderizações real, mesmo que a lógica de ambos seja a mesma - encapsular a alteração dentro de um useEffect. Pesquisei e pude fazer as seguintes anotações que esclareçam tudo:
    1 - A função passada para useEffect será executada depois que a renderização
    do componente estiver disponível na tela.
    2 - Caso não seja informado o array de dependências, o useEffect executa a cada renderização do componente.
    Assim que a tela é aberta, o contador de renderizações já é incrementado, só não aparece "1" na tela por que primeiro é renderizado o component depois executado o useEffect. O valor antes do useEffect incrementar é zero. Na próxima renderização, o valor retornado no component é 1, mas assim que useEffect executar, será 2. O próximo número já está salvo, só não é exibido.

  • @haroldojunior9910
    @haroldojunior9910 3 місяці тому

    Muito bom!

  • @carlosdeucher131
    @carlosdeucher131 2 роки тому +1

    No minuto 30 sobre o useRef guardar o valor antigo do state ,no caso o valor da ref ainda é o mesmo com a diferença que ainda nao foi renderizado em tela, certo?

  • @ppacrz
    @ppacrz Рік тому

    Conteúdo muito bom!!

  • @robertoarraial
    @robertoarraial Рік тому

    Cara. Tu tem uma didática incrível !

    • @ramonStones
      @ramonStones Рік тому

      Ele acelera o vídeo dele em 2x. Me recuso a acreditar que ele fala nessa velocidade.

  • @SouAndersonDavid
    @SouAndersonDavid 2 місяці тому

    Eu já conheço todos os hooks mas mesmo assim abri o vídeo (ótimo, digasse de passagem), daí minha cabeça compilando vários erros de TS durante o code kkkkk mano, a diferença entre JS e TS é enorme mesmo

  • @jonatasserrinha
    @jonatasserrinha Рік тому

    Muito bom o conteúdo

  • @_mateusdigital
    @_mateusdigital Місяць тому

    Top!

  • @brunocarvalho287
    @brunocarvalho287 Рік тому

    Muito bom

  • @thrashshorts1703
    @thrashshorts1703 2 роки тому

    q video maravilhoso

  • @joffrebarbosa5987
    @joffrebarbosa5987 Рік тому

    Conteúdo incrível! Assisti no 0.75 pra entender melhor kk

  • @pablo87996
    @pablo87996 4 місяці тому +1

    O exemplo do useCallback é praticamente o mesmo do useEffect, tirando que o do useCallback tem um input. Por que usar o useCallback se dá pra fazer o mesmo com o useEffect?

  • @erickstopassoli9355
    @erickstopassoli9355 10 місяців тому

    obrigado

  • @hawks2271
    @hawks2271 Рік тому

    Bom trabalho

  • @sakamotoyorigami1997
    @sakamotoyorigami1997 3 місяці тому

    Conteúdo otimo

  • @infopontes
    @infopontes 8 місяців тому

    Show

  • @heitorazevedo3239
    @heitorazevedo3239 2 роки тому

    Fala Bro! Faz mais vídeos daora seu canal e mostra bastante coisa os outros mais ficam de historinha kkkk E mano faz um Tour pelo seu setup quero ver seus equipamentos e como está montando… o que acha importante ter etc etc Nois mlkao!

  • @luanpaiva29
    @luanpaiva29 8 місяців тому

    Muito f0d@ o conteúdo!!!!

  • @thrashshorts1703
    @thrashshorts1703 2 роки тому

    amigo poderia fazer um vídeo sobre component life cycle?

  • @viniciusm.m.7822
    @viniciusm.m.7822 2 роки тому +1

    Felipe, monstro!!!!
    Valew mano!
    God bless!

  • @ssoulstt
    @ssoulstt Рік тому +1

    Salve mano, eu percebi que quando vc esta mexendo na função uma linha amarela mostra onde ela termina (ex 2:54) como faz isso?

  • @JulioDevUnreal
    @JulioDevUnreal 2 роки тому

    mora da historia do usecallback kkk é quando colocar varias funções passando por props, e colocar um input kkk e um console.log kkk e ver se ta renderizando

  • @henriquemoreira1879
    @henriquemoreira1879 2 роки тому +1

    Vídeo sobre como você estuda programação por favor !!!!!!!!!!!!!!!!

    • @edsonribeiro6135
      @edsonribeiro6135 2 роки тому +1

      Ele fala nesse vídeo aqui: ua-cam.com/video/6IUivbVNDy0/v-deo.html

  • @camilabreda3102
    @camilabreda3102 9 місяців тому

    Asmeiiiiii!

  • @ramonStones
    @ramonStones Рік тому

    UseMemo e UseCallback são os hooks mais gostosinhos de usar, muito fácil.

  • @rogerxavier606
    @rogerxavier606 Рік тому +1

    Qual a diferença do useEffect, useMemo e useCallback? Para mim pareceu tudo a mesmo coisa, exceto a questão de que o useEffect não mantem nada na memoria ksksk

  • @antoniorodrigues8441
    @antoniorodrigues8441 9 місяців тому +1

    Eu tenho duas dúvidas.
    O Redux não é a junção do useContext e o useReducer ?!?!?!?
    E caso queira usar o useContext e o Redux, qual deve ser o pai e o filho?

  • @fullpistolla8586
    @fullpistolla8586 2 місяці тому

    Eminem da programação 🫡

  • @marcusvinnicius4071
    @marcusvinnicius4071 9 місяців тому

    excelente aula, porém eu tiver que assistir essa aula para começar a entender a aula de ReactJs para iniciantes.

  • @Alisson-Souza
    @Alisson-Souza Місяць тому

    Conteúdo prime

  • @pet20
    @pet20 2 роки тому

    Mn tu parece o Adam TV.

  • @joaovictor-dl6ve
    @joaovictor-dl6ve 2 роки тому +1

    Mano, me explica uma coisa q até agora eu n entendi, normalmente eu vejo em projetos uma pasta chamada "hooks", oq é essa pasta e para q serve?

    • @Cookieukw
      @Cookieukw 2 роки тому +1

      abre e vê, ué kkkkkkkk

    • @ramonvinicius3498
      @ramonvinicius3498 Рік тому +2

      Hooks personalisados, ou seja, que você mesmo cria.

  • @RenanSantos7
    @RenanSantos7 6 місяців тому

    Continuo não entendendo nada de useReducer.

  • @gustavo3220
    @gustavo3220 Рік тому

    " text-decoration: 'lie-througnh' "
    - poxa bixo, deu erro :(

  • @ramonvinicius3498
    @ramonvinicius3498 Рік тому +1

    Quem que usa useMemo em pleno 2022?

  • @gabrieljauneribera9931
    @gabrieljauneribera9931 7 місяців тому

    Rapaz eu tive q assistir o vídeo em 0.75x kkk

  • @cletenirmoura6497
    @cletenirmoura6497 2 роки тому +1

    *_Mano esse useReducer é coisa do capeta_*

  • @monaco4693
    @monaco4693 Рік тому

    aula excelente, mas pra um junior escutar vc falando nessa rapidez e compreender tudo que vc diz fica bastante complicado (este é o meu caso)

    • @Cookieukw
      @Cookieukw Рік тому

      Só diminuir a velocidade

    • @monaco4693
      @monaco4693 Рік тому

      @@Cookieukw faz sentido kkkkkkkkkkkkkkk

  • @cletenirmoura6497
    @cletenirmoura6497 2 роки тому

    Diminuir só velocidade da explicação please

  • @divrans5175
    @divrans5175 2 роки тому

    sumiu em meu consagrado

  • @smartcentral2562
    @smartcentral2562 2 роки тому +1

    caraio mano, vc fala em 2x!

  • @daviamerico2268
    @daviamerico2268 11 місяців тому

    tudo com nome reduce no js e uma desgraça kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk