Concurrent Rendering

• Concurrent Rendering

Introdução

A renderização simultânea é um recurso poderoso do React 18 que permite que várias tarefas de renderização aconteçam sem bloquear a interface do usuário. Isso marca uma melhoria significativa na forma como o React lida com a renderização, levando a experiências de usuário mais suaves e melhor desempenho do aplicativo.

O que é renderização simultânea?

A renderização simultânea no React 18 permite a renderização de vários elementos em segundo plano, em seu próprio ritmo, sem bloquear o thread principal. Isso significa que o React pode preparar novas visualizações em segundo plano, interromper a renderização se surgirem atualizações de maior prioridade e atualizar a UI com eficiência.

Benefícios da renderização simultânea

Experiência do usuário aprimorada: ao reduzir o tempo gasto no bloqueio do thread principal, a renderização simultânea garante interações mais suaves. Desempenho aprimorado: permite que o React trabalhe primeiro em atualizações de alta prioridade, melhorando o desempenho percebido de seu aplicativo. Flexibilidade na renderização: os desenvolvedores têm mais controle sobre o processo de renderização, permitindo otimizações com base nas interações do usuário e nos recursos do dispositivo.

Renderização síncrona vs. simultânea

Na renderização síncrona tradicional, o React processa atualizações em um único thread de UI de bloqueio e ininterrupto. Isso pode causar instabilidade e falta de resposta da interface do usuário durante atualizações complexas. A Renderização Simultânea, por outro lado, quebra esse padrão ao permitir que atualizações não urgentes sejam interrompidas e retomadas, levando a uma experiência de UI mais suave.

Exemplos práticos

Usando Suspense com Renderização Simultânea O React 18 expande os recursos do Suspense, tornando-o uma ótima ferramenta para usar com Renderização Simultânea.

const ProfilePage = () => {
  return (
    <React.Suspense fallback={<Spinner />}>
      <UserProfile />
    </React.Suspense>
  );
};

Neste exemplo, Suspense trabalha com Renderização Simultânea para carregar o componente UserProfile. Se não estiver pronto, o Spinner será mostrado como substituto.

Priorizando atualizações com useTransition

O React 18 introduz um novo gancho chamado useTransition que permite aos desenvolvedores priorizar as atualizações. Isso é útil quando você deseja garantir que uma atualização de alta prioridade seja renderizada antes de uma atualização de baixa prioridade.

const [isPending, startTransition] = useTransition();
const [mode, setMode] = useState('edit');

const updateProfile = () => {
  startTransition(() => {
    setMode('view');
  });
};

• Neste exemplo, startTransition é usado para marcar a atualização do perfil como de prioridade mais baixa, permitindo que atualizações mais urgentes tenham precedência.
• Isso substitui a implementação usando um useState para validar quando algo está loading ou não.