Resumo da Aula sobre React Lazy e Code Splitting

Nesta aula vamos aprender sobre o React Lazy para a gente poder dar o nosso import dinâmico de componentes usando o CodeSplitting. Então vamos fazer isso aqui, continuar o nosso aprendizado. Já fizemos o CodeSplitting usando o import dinâmico dessa maneira aqui. Se você se lembra, voltar aqui no navegador. Na aba aqui a gente tem esse componente aqui que inclui esse botão para abrir um painel. E quando a gente clica ele, baixa esse arquivo 0.tunc.js que é o pedaço de código, que contém o código desse painel aqui com várias linhas, painel aqui. Então a gente aprendeu a fazer isso usando import dinâmico. Quando você clica você dá o import e o import dinâmico retorna uma promessa. Então você tem que usar o ponto den para poder lidar com essa promessa. Aí você pega, depois que receber, ele vai fazer o pedido para aquele chunk, aquele pedaço do código, você vai receber e a gente dê o set state com o painel.default. Não esquece o ponto default porque o componente foi exportado usando o default. Aí a gente usa o painel que está dentro do state do componente para poder aqui renderizar onde o painel estiver aberto. Agora a gente vai aprender isso. A mesma coisa é set que usando o reactlase. Quando a gente usar o reactlase, a gente vai tornar um componente preguiçoso, lazy no inglês. Então vai facilitar essa manobra de code splitting para a gente não ter que fazer o import e lidar com o den e fazer esse set state e essas coisas. E manter o painel no state. Então vamos lá. Então para fazer o reactlase é bem simples. No local que você quer aqui, você mostra o componente que você quiser. É só pôr aqui, por exemplo, você tem o painel. Então eu não vou mais importar pegar o painel do the set state, eu vou deixar o painel só assim, dessa maneira normal. E vou lá em cima. Deixa eu remover isso aqui também, aproveitar. Remover esse cara. Lá em cima aqui. Eu vou retornar. Vou descomentar aqui esse cara. Mas agora a gente não vai fazer assim, a gente vai fazer const. Vai definir o painel como variável. Agora essa variável aqui, olha só. Essa variável a gente vai definir, fazer uma atribuição aqui, usando o react.lase. React.lase. Agora esse laser é uma função que você tem que passar como argumento. Outra função, essa função, vamos usar a função de seta. Tem que retornar o import do componente que a gente vai carregar. Nesse caso é o painel aqui, eu vou recortar esse cara. E você vai fazer o import retornar aqui, dessa maneira aqui. Então você chama o react.lase, passa como argumento a função. Essa função precisa retornar aquela promessa do import dinâmico. Então você vai dar um import aqui e retornar essa função. Aí você usa a variável painel aqui embaixo. Onde você quer que o componente apareça. Note que quando você dá o render, chama render, o painel aberto vai estar falso inicialmente. Por isso não vai renderizar essa parte aqui do código. O causa disso ele ainda não vai carregar o componente. O componente só será carregado se essa parte do código for executada. Isto é, se fosse renderizado dessa maneira aqui. Então ele está esperando aqui, quando o painel aberto, esse variável de estado, tiver valor verdadeiro. Ele vai chamar o render com o valor painel aberto verdadeiro. Vai aqui e o lado direito também será executado. Então ele vai chamar o componente, renderizar esse componente, preguiçoso, lazy. E por causa disso ele vai automaticamente acionar aquele carregamento dinâmico e vai fazer o pedido para obter aquele chunk do servidor. Com isso a gente não precisa mais do import aqui no onclick. Eu vou comentar essa linha e a gente só vai precisar dar o set state para poder mudar a flag aqui para botar o painel aberto. Virar true ou na inicialmente. Não precisa mais do painel no estado. Eu vou remover. Ela está essa linha. Deixa só assim o set state para mudar a flag para poder acionar esse cara aqui. No próximo render depois que você clicar o botão. Então vamos ver se funciona isso. Eu salvei, ele dá automaticamente carrega. Vamos clicar no painel. Deu um erro aqui. Mas o que aconteceu? Ah, já sei. Espera aí. Vamos voltar aqui a network. Então a gente pegou o chunk, olha aqui o chunk, 0.chunk. A resposta e realmente ele nos retornou o painel. Agora o problema é que... Deixa eu abrir de novo. O problema é o seguinte. Já deu um erro aqui. Dizendo que o componente de react suspendeu na hora do rendering. Na hora que estava fazendo o render e não tinha uma interface de usuário de alternativa para mostrar na hora. A gente vai falar de suspense depois. Mas agora vamos entender o que aconteceu. Quando você clicar o botão, olha aqui de volta no código, ele chama a função click. A com click vai dar o set state. Muda o painel aberto que é inicialmente falsa daqui. Vai virar true. Quando o estado de componente mudou, ele vai acionar o render para ser chamado novamente. Ele vai vir aqui render, ser chamado. Aí ele vai ver que o set state, o this.state painel aberto é true. Ele vai pegar e acionar o painel aqui. Aí vai aqui na próxima rendering. O problema é que o painel vai fazer o pedido para obter aquele chunk de código, mas leva um tempo para receber a resposta. Por isso ele vai ter esse problema aqui. Então vamos ver isso na próxima aula. Espera um pouco aí. Dá um tempo e até a próxima.