Raphael Corrêa
Raphael Corrêa
  • 39
  • 9 019
Debounce: Como aplicar essa técnica no React
Debounce com React JS
Bem-vindo a este tutorial onde você aprenderá a aplicar o “debounce” no React. Se você está procurando uma maneira eficiente de limitar a frequência com que uma função é chamada, então o “debounce” é a solução.
O “debounce” é uma técnica de programação que garante que uma função não seja chamada novamente até que uma certa quantidade de tempo tenha passado sem ela ser chamada. Isso é extremamente útil em situações onde você precisa limitar o número de chamadas de uma função para melhorar o desempenho do seu aplicativo.
Neste vídeo, vou mostrar como aplicar o “debounce” do Lodash em um custom hook no React de forma rápida e prática. Vamos começar com o básico e avançar para a implementação real do “debounce”.
Ao final deste vídeo, você terá uma compreensão sólida de como aplicar o “debounce” no React e como ele pode ajudar a melhorar o desempenho do seu aplicativo. Então, se você está pronto para aprender mais sobre o “debounce” e como aplicá-lo no React, junte-se a mim neste tutorial.
Lembre-se, a prática leva à perfeição. Então, depois de assistir a este vídeo, certifique-se de colocar suas novas habilidades em prática. E se você tiver alguma dúvida ou comentário, sinta-se à vontade para deixá-los abaixo.
Espero que você aproveite este vídeo e aprenda algo novo. Obrigado por assistir e feliz codificação!
Espero que isso ajude! Se você precisar de mais assistência, sinta-se à vontade para perguntar.
==== Siga nas rede sociais ====
▸ Instagrama: @devraphaelcorrea bit.ly/3YbmHUB
▸ Linkedin: bit.ly/3KhbpbP
▸ GitHube: bit.ly/44ZscYK
Переглядів: 181

Відео

Custom Hook em 3 min - React JS
Переглядів 81Рік тому
Custom Hook ou Hooks customizados em 3 min Fala pessoa, nesse vídeo você vai aprender a criar “hooks customizados” no React. Se você está se perguntando o que são hooks e por que eles são importantes, você veio ao lugar certo. Os Hooks são uma adição recente ao React que permite usar o estado e outros recursos do React sem escrever uma classe. Eles são funções que permitem a você “ligar-se” aos...
Maestro Test: Testes end-to-end no React Native #reactnative
Переглядів 212Рік тому
Teste end-to-end com Maestro em aplicativos React Native Maestro Teste é uma excelente ferramenta de testes automatizados para aplicativos. Uma bela alternativa o Detox. Vantagens: - Não depende do React Native: O Maestro Teste é uma ferramenta que não depende exclusivamente do React para funcionar. Diferente do Detox, o Maestro consegue fazer testes nativos em qualquer aplicativo. - Facilidade...
React JS com arquitetura MVVM | model view view-model
Переглядів 1,7 тис.Рік тому
▸ Arquitetura MVVM: Simplificando o Desenvolvimento em React Aprenda a simplificar seu código e melhorar a organização do seu projeto React JS com a arquitetura MVVM! 🚀 Neste tutorial envolvente, exploramos o conceito do Model-View-ViewModel (MVVM) e sua aplicação prática. Saiba como dividir seu código em três camadas distintas, separando lógica e interface de forma eficaz. Se você é um desenvo...
Tutorial glass effect com CSS | glassmorphism
Переглядів 77Рік тому
Tutorial glass effect com CSS | glassmorphism
Criando um site de streaming - speed code
Переглядів 99Рік тому
Criando um site de streaming - speed code
debounce em JavaScript: como usá-la para melhorar a performance de sua aplicação web
Переглядів 65Рік тому
debounce em JavaScript: como usá-la para melhorar a performance de sua aplicação web
Como criar uma Higher Order Function | javascript | handsOn
Переглядів 63Рік тому
Como criar uma Higher Order Function | javascript | handsOn
Formulário Javascript - Aprenda a manipular elemento com HTML JS | handsOn
Переглядів 1522 роки тому
Formulário Javascript - Aprenda a manipular elemento com HTML JS | handsOn
Criando um aplicativo de delivery do zero em 11 minutos - Speed Code
Переглядів 1733 роки тому
Criando um aplicativo de delivery do zero em 11 minutos - Speed Code
Travel App UI - React Native - Speed Code
Переглядів 8013 роки тому
Travel App UI - React Native - Speed Code
SpeedCode - App Workout mobile
Переглядів 743 роки тому
SpeedCode - App Workout mobile
Como publicar pacotes / libs no NPM - Node | Javascript | Bibliotecas
Переглядів 4703 роки тому
Como publicar pacotes / libs no NPM - Node | Javascript | Bibliotecas
Formulário de login com React JS - Speed Code
Переглядів 3923 роки тому
Formulário de login com React JS - Speed Code
bottom navigation javascript: Criando uma barra inferior animada com HTML, CSS e JavaScript
Переглядів 1893 роки тому
bottom navigation javascript: Criando uma barra inferior animada com HTML, CSS e JavaScript
Aplicativo React Native - Apresentação
Переглядів 184 роки тому
Aplicativo React Native - Apresentação
Como criar um botão com efeito Ripple usando HTML, CSS e JavaScript
Переглядів 814 роки тому
Como criar um botão com efeito Ripple usando HTML, CSS e JavaScript

КОМЕНТАРІ

  • @ThyagoRibeiro-l1w
    @ThyagoRibeiro-l1w 7 днів тому

    Tutorial bem objetivo, parabéns ! Obrigado por compartilhar o conhecimento. Achava que era algo complicado por encontrar video aulas com mais de 30 min, mas a verdade é que não é rs.

  • @Thiagoff-m2v
    @Thiagoff-m2v 3 місяці тому

    gostei do video, bem simples. Mas qual a necessidade de criar fns pra alterar estado se o proprio setEmail e setPassowrd ja sao sao fn pra isso? nao seria mais fácil passar logo os sets pelas props?

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

      Poderia sim. Mas eu tenho esse costume de fazer funções que altera estados por 2 motivos. 1 - normalizar e padronizar as coisas 2 - caso um dia eu precise aplicar alguma máscara ou algum lógica a mais no estado ficaria mais fácil.

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

    Já que sua model (useLoginModel) é um hook, pq você decidiu passar eles (handleSubmit, email, etc..) para a camada de view via props, ao invés de usar o hook useLoginModel como um hook de fato?

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

      Boa!! Na vdd poderia ser feito com hook também. Não teria problema nenhum. Mas a minha intenção via props era deixar o mínimo de lógica possível na camada de view. Se usasse o hook direto lá eu teria que extrair tudo do useLogin. Com as pros eu n preciso disso e a camada de view fica mais "limpa"

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

    Brabo

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

    Ae Brotherr!!! Parabéns pelo conteúdo!

  • @RobertoMiyazakiUriasNicoletti
    @RobertoMiyazakiUriasNicoletti 5 місяців тому

    Ótima explicação, resumiu de forma super clara 👏🏻

  • @dilmarjunior3383
    @dilmarjunior3383 5 місяців тому

    Cara ficou sensacional seu vídeo!!! Mas tenho uma dúvida, no caso a camada que você chamou de model não seria a view-model?? Onde você manipula os dados que vem da model ( API / banco) e deixa eles disponíveis para a View utilizar.

    • @raphaelcorreadev
      @raphaelcorreadev 5 місяців тому

      Opa, obrigado pelo comentário! Entendo a confusão, pois realmente há algumas variações na terminologia em diferentes artigos. No padrão MVVM (Model-View-ViewModel), as camadas são definidas da seguinte forma: Model: Responsável pela lógica de negócios e dados da aplicação, acessando e manipulando dados de fontes como APIs ou bancos de dados. View: A camada de apresentação, que exibe os dados ao usuário e contém a interface do usuário. ViewModel: Atua como intermediária entre a View e o Model, manipulando os dados do Model e disponibilizando-os para a View. Também contém a lógica de apresentação e comandos acionados pela View. A ViewModel é, portanto, a camada que une a lógica de negócios (Model) com a camada de apresentação (View). Talvez a confusão venha do uso do termo “Model” em outros padrões de design

    • @dilmarjunior3383
      @dilmarjunior3383 5 місяців тому

      @@raphaelcorreadev entendo! Muito obrigado pela resposta! Valeu demais mano!

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

    Muito bom cara. Mas ele consegue fazer o teste com navegações entre telas, isso seria bem interessante para deixar fiel ao algum fluxo de usuário

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

      Consegue sim, no vídeo eu fiz sem a parte de navegação pra simplificar. Mas vc consegue testar a navegação tb

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

    god

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

    Muito simples e muito funcional... Uma arquitetura que estava com dificuldades de entender, entendi em 6 minutos

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

    se eu tivesse te faria um pix de mil reais agr só por esses 30s de video, mt obrigadaaaaaa

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

    Eu costumo criar uma camada de serviço onde eu coloco toda a parte do crud, é uma boa prática? para cada crud que eu faço eu crio uma camada para cada.

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

      É sim!! Mas vc poderia cria uma forma de reaproveitar seu código.

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

    Raphael, pesquisei muito e cheguei no seu vídeo, que pra mim, foi o melhor conteúdo disparado. Compreensão muito simples e explicação sem enrolação. Muito obrigado por compartilhar o seu conhecimento. Te desejo sucesso!

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

    Parabéns pelo conteúdo! Sua abordagem direta e prática facilitou bastante a compreensão. *O audio está muito baixa

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

    Meu Mix SHIA CARRIER TVvydeos PUBLISH NOW! PROFISSÃO PROGRAMADOR

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

    Qual app ou extensão é essa que simula o celular

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

      Olá @natashakoala1236. Existem programas oficiais para desenvolver aplicativos. No caso do vídeo, estava usando o xcode da apple. Ele vem com vários o simuladores de iphone até ipads. Vc pode conseguir o mesmo para android com o Android Studio. Com ele vc consegue simular os aparelhos mais comuns de android. Espero ter ajudado !! Qq dúvida é só falar :)

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

    sensacional

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

    Asmei

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

    Efeito muito massa! Força ai no canal q ta parece que esta começando

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

      Sim, esse efeito é muito bom. O canal está no começo também. Obrigado !! 😁

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

    Fala pessoal, tudo tranquilo? Eu fiz um vídeo completo sobre o assunto, é só clicar no link para ver ua-cam.com/video/tvIdRCwNtvY/v-deo.html

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

    Fala pessoal, tudo tranquilo?? Eu fiz um vídeo completo sobre o assunto me memorização. Se você quer ver mais detalhes é só clicar no link ua-cam.com/video/xm-wBN7IOEc/v-deo.html

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

    Brabo demais 👏👏

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

    que porra é essa agora!? kkk

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

    faz as urgente do dia anterior k

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

    Muito brabo o teu trampo, mano! Muito sucesso, abraços!

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

    hello you tutorials are great.

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

    Baita tutorialzin. Simples demais a explicação e a forma de publicar. Um monte de vídeo enrolando pra baralho, longo, etc. O teu foi direto ao ponto. Fiquei admirado de não ter nenhum like desde a publicação. Eu achei que era mais complicadinho mas é igual a publicação dos temas pra VSCode que eu tenho. De boas. Só resta agradecer irmão. Obrigado!

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

      Obrigado Thiago. Fico muuito feliz com seu feedback :D

  • @arupde6320
    @arupde6320 3 роки тому

    upload more videos like that

    • @raphaelcorreadev
      @raphaelcorreadev 3 роки тому

      Yes, I have more videos ready. Will be posted weekly :D

  • @crendo-helpingsmallchannel5419
    @crendo-helpingsmallchannel5419 4 роки тому

    You are awesome If people try and give you hate, just dont take it seriously because they are trying to annoy you ◑﹏◐