Entendendo como funciona o React Suspense

A entrega de conteúdo e o desempenho do site, são fatores importantes para que as aplicações Web alcancem a máxima experiência de usuário. O conteúdo deve ser entregue aos usuários de forma rápida e eficaz. Você deseja que seu site funcione com o melhor desempenho para manter um tempo de permanência decente.

Antes do React 16, o React tinha o método React.lazy() que permitia aos desenvolvedores rotular um componente como "preguiçoso", fazendo com que ele fosse baixado antes de ser renderizado.

O React 18 fez algumas alterações e modificações na biblioteca React, algumas das quais foram adições, remoções ou depreciações e aprimoramentos do que já existia.

Uma dessas melhorias envolve a funcionalidade "Suspense" do React. O recurso "Suspense" faz parte da biblioteca desde o React 16. Com o lançamento recente do React 18, o recurso foi aprimorado ainda mais.

Neste artigo, discutiremos como o "Suspense" funciona no React e alguns de seus casos de uso comuns.

Você deve ter um conhecimento prático de React e JavaScript para acompanhar esse post.

O que abordaremos:

• O que é Suspense?
• Comparando React Suspense com Transitions
• Casos de uso de Suspense
• Erros comuns cometidos ao usar o suspense

O que é Suspense

A API React Suspense é uma interface de baixo nível que rastreia o ciclo de vida de um componente e atrasa a renderização enquanto os dados necessários estão pendentes. A experiência do usuário melhora, pois os usuários não terão que visualizar um componente parcialmente carregado antes que os dados sejam eventualmente buscados e carregados completamente.

Por exemplo, se a duração que leva para uma tabela carregar seus dados não for tratada adequadamente, os usuários podem ver inicialmente uma tabela vazia antes que o componente seja renderizado novamente e exiba uma tabela totalmente carregada.

A Suspense API atua como um wrapper em torno de um componente a ser renderizado e, em seguida, fornece um fallback que é executado primeiro antes que o componente principal seja renderizado.

Vejamos um exemplo. Podemos usar o React Suspense para envolver o componente que renderiza uma imagem e especificar um carregador giratório como a opção de fallback. Isso evita que os visualizadores vejam imagens borradas que mudam gradualmente para a imagem original quando uma imagem é baixada de um CDN ou armazenamento em nuvem.

//Logo é um componente que busca uma imagem de um CDN
import Logo from '.LoadLogo.js'

<Suspense fallback={<h1>Loading . . .</h1>}>
    <Logo />
</Suspense>

Vamos examinar um cenário diferente no qual os dados são carregados de uma API JSON e precisamos impedir que o componente forneça um resultado vazio:

import loadData from './api/loadData.js';
const data = loadData('users.json');

<Suspense fallback={<h1>Loading . . .</h1>}>
    <Users />
</Suspense>

const Users = () => {
    const people = data.read();

    return (
        <div>
            {people.map(person => {
                <p key={person.id}>{person.name}</p>
            })}
        </div>
    );
};

Comparando React Suspense com Transitions

Apesar de suas semelhanças, as APIs Suspense e Transition, não devem ser usadas de forma intercambiável ou no mesmo contexto.

O React Suspense rastreia a prontidão de um componente antes de renderizá-lo e oferece apenas uma alternativa adiada até que o componente original se prepara para a renderização.

A transição, por outro lado, permite priorizar um evento em detrimento de outro. Por exemplo, ao adicionar um recurso de pesquisa, você pode querer mostrar ao usuário o que ele está digitando, mas esperar para iniciar a pesquisa até que o usuário termine de digitar.

import {startTransition} from 'react';

// Defina o valor de input, mas não inicie a pesquisa
setInputValue(input);

startTransition(() => {
    // Defina o valor final da pesquisa e inicie a pesquisa
    setSearchQuery(input);
});

As atualizações de estados marcadas como não urgentes dentro de startTransition, são interrompidas se uma atualização urgente for feita, enquanto o estado não urgente ainda estiver sendo atualizado. Esse processo continua até que nenhuma nova atualização urgente seja feita.

Casos de uso de Suspense

Como foi discutido na seção anterior, é simples confundir a API React Suspense com Transition e vice-versa. Portanto, é crucial saber quando usar e quando esquecê-los.

A seguir estão alguns usos notáveis para a API React Suspense:

• Renderizando mídia: largura de banda inadequada pode retardar o download de mídia de um servidor externo, para ser renderizado no lado do cliente. Suspense pode fornecer uma opção alternativa enquanto aguarda o download do conteúdo, garantindo uma experiência de usuário tranquila.

• Busca de dados externos: este caso é semelhante ao download de mídia, exceto pelo fato de que podemos estar baixando dados de um banco de dados e podemos precisar lidar com condições de corrida e problemas de simultaneidade. Nessa situação, o suspense pode ser um grande trunfo.

• Divisão de código: Suspense pode executar a entrega de conteúdo em paralelo ou sob demanda.

Erros comuns cometidos ao usar o Suspense

Os desenvolvedores frequentemente abusam do Suspense por causa de sua semelhança com Transition e outras APIs. Para ilustração:

Usando componentes que lidam com simultaneidade usando useEffect() dentro do Suspense. O uso do hook useEffect(), que é projetado para gerenciar simultaneidade, dentro da API do Suspense anula o propósito da API.

O Relay usa Suspense, porém não executa as mesmas funções do Relay. Alguns usuários confundem o Suspense com uma ferramenta de solicitação de API do servidor, como Axios ou Relay.

Outro erro que as pessoas cometem é usar catch() para lidar com erros. Isso fará com que o componente espere pela promessa antes de renderizar. Em vez disso, Error Boundary pode ser usado para lidar com erros de renderização.

Conclusão

Embora o Suspense faça parte do React desde a versão 16, o conceito de simultaneidade do React 18 torna o conceito da API do Suspense mais eficaz e aprimorado.