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