Hack I Learned Today

Fala turma, a ideia é simples, compartilhe aquele hackzinho que você aprendeu hoje de bobeira, por conta de alguma situação ímpar no trabalho ou progredindo em algum projeto pessoal.
Segue abaixo meus aprendizados de hoje:

Lazy loading + Suspense (ReactJS):

Lazy loading (Code-Splitting):

É basicamente uma forma de carregar os conteúdos de uma página / componente por demanda.
De forma que ao acessar a home do seu projeto (por exemplo), não será necessário carregar todas os demais recursos presentes em outras páginas, ainda não acessadas pelo usuário.

Suspense:

Suspense permite que a renderização do componente espere por algo antes de efetivamente acontecer.
Em conjunto com o lazy loading, basicamente conseguimos passar uma renderização temporária como feedback para o usuário enquanto os recursos são carregados.
Informando na propriedade fallback do componente, muito chique para usar aqueles componentes de esqueleto enquanto os recursos estão sendo carregados.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

Alguns links:

Segue um vídeo muito top do canal do Pedro Tech, utilizando esses recursos na parte de rotas da aplicação:
https://www.youtube.com/watch?v=-4fyyyQjsz8&ab_channel=PedroTech

Exemplo de código extraído da documentação do react:
https://reactjs.org/docs/code-splitting.html

Alguns componentes de feedback interessantes para utilizar em conjunto com o Suspense (Ant Design):
https://ant.design/components/skeleton
https://ant.design/components/spin