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.
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?
@@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.
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?
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
Cara q jeito simples de explicar, show de bola
Parabéns
continua assim cara , ajuda agente demais o/
que bom que gostou!
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.
Concordo! Mas tudo depende qual é a finalidade da aplicação
eu uso lib pra componentes mais genéricos como o drawer, bottom navigation, etc
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?
@@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.
Simples, objetivo ... parabéns!
👍👍👍
Show. Pode usar em componentes internos? Ao invés de views?
Que delícia ver esse vídeo haha!
que bom que gostou! hahaha
Realmente bem útil essa feature. Bacana o conteúdo brother!
Obrigado! Fico feliz que tenha gostado
Ajuda muito com react lazy, pqp.
👍👍
Top demais o vídeo, parabéns! Única dúvida que eu tenho é qual o tema do VSCODE que voce esta usando? Curti demais!
que bom que gostou! O tema é esse aqui marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode
Valeu ótima explicação
vlw!
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?
em tudo não. Depende do tamanho da aplicação e da importância do componente/página sendo splitado
E o Vite? Como ele entra resolvendo a questão do build, usando esmodules?
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
Mas isso caso nao esteja utilizando o React-router-dom né?
da pra fazer com o react router tambem. Cada rota do seu projeto seria uma lazy load
@@aqueleprogramador usaria a tag lazy pra cada rota, entendi! obrigado amigo!
@@deivsonb7 é simples da forma como voce ta pensando mesmo. www.robinwieruch.de/react-router-lazy-loading/