Aula de Suspense em React

Estamos de volta pessoal, agora a gente vai falar de suspense. Então, na aula anterior nós aprendemos sobre React Lazy para a gente poder fazer aquele import dinâmico. Sem precisar dar o set state armazenar o componente no estado do nosso componente próprio aqui. Então, agora a gente deu o React Lazy, usamos o React Lazy que retorna esse import dinâmico, o import dinâmico retorna a promessa, que vai ser lidada com o React Lazy. Aí a gente põe o componente aqui, o painel, que é freguiçoso, carregado Lazy, de maneira Lazy. Quando o painel aberto vira verdadeiro, ele vai renderizar os caras, é certo que ainda não carregou do servidor, não obteu aquele chunk. Então, leva um tempo para fazer o pedido e receber a resposta. E por causa desse tempo, entre pedido e a resposta, ele vai dar esse erro que a gente pegou aqui. Então, ele sugere mesmo usar o suspense, mas o que é que é suspense? Nada mais nada menos é a maneira da gente mostrar um estado de carregamento para o componente aqui que vai aparecer o negócio enquanto o componente for carregado. Normalmente você pode usar, por exemplo, aquela spinner que fica rodando, girando. Aí, quando você está usando o React Lazy, você normalmente vai usar com o suspense, o componente suspense, tá? Então, vamos ver aqui. Então, aqui embaixo, onde você tiver o painel, vou botar um parênteses para a gente adicionar mais um componente pai, né? Vamos cobrir o painel aqui, o componente pai, chamado suspense. Agora, o suspense está dentro do pacote do React, então, tem que falar react.suspense. Se você vai usar mais de uma vez, eu recomendo usar um pouco aqui no importe, mas eu só vou usar uma vez, então deixa assim mesmo. Aí, o suspense leva essa prop, chamada fallback, que vai ser um componente que você quer que apareça enquanto o componente lazy estiver carregando. Por exemplo, pode ser aquele spinner, mas eu não tenho nenhum spinner aqui, eu vou usar só uma mensagem bem simples dizendo carregando, tá? Tá bom? Então, esse é o suspense. Dentro, com os filhos, filhas e filhas do suspense serão componentes preguiçosos, lazy. Então, esses componentes aqui ainda não estão carregados, não são carregados, ele vai levar um tempo e enquanto estiver carregando, vai usar esse componente, vai mostrar esse componente que é passado na prop fallback, tá? Então, vamos salvar e recarregar isso, tentar novamente não ter mais erro, né? Olha aqui, vou clicar abrir painel e ele abriu. E você nota que quase a gente nem viu aquela mensagem carregando, né? Foi muito rápido. Vamos dar um olhado na aba de networkhead, realmente o chunk 0.chunk está aqui e apareceu com o código do painel. Tá? Então, ele realmente funcionou, mas a gente não viu aquela mensagem ainda. Então, será que dá alguma maneira de a gente poder visualizar isso? Vou tentar aqui usar essa parte trodo aqui para mudar. Vamos ver, eu acho que não vai dar porque ainda... Nem que você use esse cara aqui, talvez seja rápido. Vamos ver. Eu mudei a minha conexão aqui, no Chrome também tem isso. É a aba de network, você clica na online e tem várias opções, você pode até adicionar a sua própria opção. O que eu estou fazendo aqui é para poder a gente simular uma conexão lenta para poder ver se aparece mesmo... E parece mesmo que é uma mensagem de carregar. Eu vou mudar agora a conexão para esse, vou clicar abrir painel e realmente apareceu carregando, você viu? Eu vi, carregando. Agora que já carregou, não aparece mais, mas eu recarrego aqui. Sendo limites, porque está tão lento, né? Agora vou descer ali. Vamos ver se descer ali. É rápido. Então você viu lá? Eu acho que também posso tentar adicionar o time out aqui no lazy? Essa maneira que eu só faço nisso para poder ver o mensagem carregando. Resolve. Não precisa saber disso. Resolve. Adeia, deixa de ser mesmo. Então você viu que o suspense leva aquela própria fallback, que vai ser o componente que aparece enquanto o componente preguiça se estiver carregando. Carregando, viu lá? Tá bom? Então vamos revisar o que a gente aprendeu. Antes disso também, você também pode, talvez o pessoal use também dessa maneira aqui, que é o import, que é o retorno implícito, tá? É a mesma coisa do que eu tinha escrito antes. Ele está implícitamente retornando essa expressão aqui. Tá a mesma coisa. Vou te mostrar aqui, que não deu nenhum problema. Vamos testar, tá? A mesma coisa. Então vamos revisar. Aprendemos sobre o componente react lazy. Essa função react lazy que vai tornar o componente preguiçoso. A maneira de fazer isso é a seguinte, você chama o react lazy e passa como argumento uma função. Essa função tem que retornar aquele import dinâmico, tá? Com o caminho do componente. Aí você atribui esse valor a uma variável, normalmente o mesmo nome do componente. Aí você usa o componente aqui no, no seu método render, tá? Aí quando bater no render e quando bater nesse cara aqui, o componente, ele vai automaticamente carregar. Agora, temos o problema de que, o que vai acontecer enquanto estiver carregando, né? Componente. Você tem que usar o suspense, react quando suspense, para poder você mostrar a mensagem ou um spinner de girando e de carregando, tá? Então você põe os componentes preguiçosos. Não precisa ser só um, pode ser vários, por exemplo, três. Vários componentes dentro do mesmo suspense. Põe fallback prop, passa aquele componente de carregando, né? Aí ele vai mostrar o carregando e quantas essas caras eu estiver carregando. E esse é o suspense, tá? Com os componentes preguiçosos como filhos, tá? Então apareceu aí. Tá bom? Então, por essa aula é só e até a próxima.