COMO DEIXAR O REACT MAIS RÁPIDO E LEVE COM REACT LAZY LOADING?

Поділитися
Вставка
  • Опубліковано 10 гру 2024

КОМЕНТАРІ •

  • @eu.moraesdev
    @eu.moraesdev Рік тому

    Cara q jeito simples de explicar, show de bola
    Parabéns

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

    continua assim cara , ajuda agente demais o/

  • @marcosantoniocerqueira126
    @marcosantoniocerqueira126 2 роки тому +5

    lazy e Suspense é indicado para casos em que um componente usa uma lib que é muito pesada, ou é um componente que carrega muito outros componentes pesados, não é recomendado usar em toda a aplicação, apenas para caso extremos, pois o próprio react já lida com várias otimizações, o problema é que cada vez mais os devs passam a usar inúmeras bibliotecas para coisas simples e acaba injetando uma porrada de libs que no futuro nem ele mesmo sabe o que faz, uma dica, aprenda mais sobre JS e a usar somente as libs necessárias, e muito provavelmente não precisará usar o lazy e Suspense tão cedo.

    • @aqueleprogramador
      @aqueleprogramador  2 роки тому +2

      Concordo! Mas tudo depende qual é a finalidade da aplicação

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

      eu uso lib pra componentes mais genéricos como o drawer, bottom navigation, etc

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

      Mas no caso do react ja lidar com isso por padrao, o que interfere usar lazy e suspense? Pelo que entendi, só traz beneficio, impacta em algo caso usado indevidamente?

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

      @@jhonathancandeu1883 vai depender muito do seu projeto. Por exemplo, num checkout faz muito sentido você exibir o formulário de compra antes de qualquer outra coisa e deixar banners publicitarios e detalhes menos importante como "não prioritário" num lazy load. Se você jogar o form de compra no lazy load, ele só vai começar a ser carregado depois de todo o bundle da aplicação ser carregado, isso vai fazer com que ele demore 1~2 segundos a mais pra ser exibido. Em questão de performance eu não acho que tenha um impacto negativo caso utilize errado mas em latência sim.

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

    Simples, objetivo ... parabéns!

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

    Show. Pode usar em componentes internos? Ao invés de views?

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

    Que delícia ver esse vídeo haha!

  • @lucasm.f6825
    @lucasm.f6825 2 роки тому +1

    Realmente bem útil essa feature. Bacana o conteúdo brother!

  • @joaopaulo-ff3vb
    @joaopaulo-ff3vb Рік тому

    Ajuda muito com react lazy, pqp.

  • @carloseduardopachecocasara5803

    Top demais o vídeo, parabéns! Única dúvida que eu tenho é qual o tema do VSCODE que voce esta usando? Curti demais!

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

      que bom que gostou! O tema é esse aqui marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode

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

    Valeu ótima explicação

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

    Você recomenda fazer isso em toda aplicação? Ou apenas em aplicações que tem um alto nível de escalonar depois. Tem algum contra de utilizar o lazy load?

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

      em tudo não. Depende do tamanho da aplicação e da importância do componente/página sendo splitado

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

    E o Vite? Como ele entra resolvendo a questão do build, usando esmodules?

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

      eu acredito que qualquer framework que utilize o Webpack consiga usar o import() pra splitar o bundle. O react envolve o lazy e o Suspense apenas para deixar mais facil e seguro

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

    Mas isso caso nao esteja utilizando o React-router-dom né?

    • @aqueleprogramador
      @aqueleprogramador  2 роки тому +2

      da pra fazer com o react router tambem. Cada rota do seu projeto seria uma lazy load

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

      @@aqueleprogramador usaria a tag lazy pra cada rota, entendi! obrigado amigo!

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

      @@deivsonb7 é simples da forma como voce ta pensando mesmo. www.robinwieruch.de/react-router-lazy-loading/