React 18 - Batching updates e Selective Rendering

No React 18, a estratégia de "batching updates" foi aprimorada para tornar o processo de renderização e atualização de componentes ainda mais eficiente e otimizado. O "batching updates" é uma técnica usada pelo React para agrupar várias atualizações de estado em uma única renderização, reduzindo o número total de renderizações e melhorando o desempenho da aplicação.

Nas versões anteriores do React, o "batching updates" ocorria principalmente dentro de manipuladores de eventos e funções do ciclo de vida dos componentes. No entanto, fora desses contextos, o React não conseguia agrupar as atualizações, o que resultava em várias renderizações e possíveis problemas de desempenho.

No React 18, a estratégia de "batching updates" foi aprimorada e agora é aplicada em todos os contextos, independentemente de onde as atualizações de estado são acionadas. Isso significa que, mesmo se você estiver atualizando o estado fora de um manipulador de eventos ou de uma função do ciclo de vida, o React irá agrupar as atualizações automaticamente, resultando em um processo de renderização mais eficiente.

Aqui está um exemplo simples que ilustra o "batching updates":

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    const interval = setInterval(() => {
      // Ambas as atualizações de estado serão agrupadas automaticamente
      setCount((prevCount) => prevCount + 1);
      setText((prevText) => prevText + ".");
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>Contador: {count}</p>
      <p>Texto: {text}</p>
    </div>
  );
}

export default App;

Neste exemplo, criamos um componente App que atualiza duas variáveis de estado (count e text) a cada segundo usando um intervalo. No React 18, mesmo que as atualizações de estado ocorram fora de um manipulador de eventos ou função do ciclo de vida, elas são agrupadas automaticamente, resultando em apenas uma renderização.

Isso é especialmente benéfico em cenários onde várias atualizações de estado ocorrem em rápida sucessão ou simultaneamente, como em casos de carregamento de dados, atualizações em tempo real ou animações complexas. O "batching updates" aprimorado no React 18 garante um processo de renderização mais eficiente e otimizado, melhorando o desempenho da aplicação e proporcionando uma experiência de usuário mais fluida e responsiva.

O "batching updates" aprimorado no React 18 também é compatível com a API de Transitions (expliquei nesse artigo), permitindo que você gerencie animações e transições de forma mais eficiente em conjunto com as atualizações de estado agrupadas. Isso resulta em uma maior capacidade de resposta da interface do usuário e em um melhor desempenho geral da aplicação.

É importante notar que, embora o "batching updates" aprimorado no React 18 seja automático na maioria dos casos, você ainda pode usar a função ReactDOM.unstable_batchedUpdates para forçar o agrupamento de atualizações de estado em casos muito específicos. No entanto, essa função deve ser usada com cautela e somente quando estritamente necessário, pois o uso indevido pode levar a comportamentos inesperados ou problemas de desempenho.

Em resumo, o aprimoramento do "batching updates" no React 18 garante uma renderização mais eficiente e otimizada em todos os contextos, independentemente de onde as atualizações de estado ocorram. Isso melhora o desempenho geral das aplicações e proporciona uma experiência de usuário mais fluida e responsiva. Como desenvolvedor, você pode se beneficiar dessa melhoria simplesmente atualizando para o React 18 e aproveitando os novos recursos e melhorias sem a necessidade de mudanças significativas no seu código.

Falando um pouco agora sobre a Selective Rendering, é uma técnica de otimização no React que envolve a escolha consciente de quais partes da aplicação devem ser atualizadas e renderizadas em resposta a uma mudança de estado. Isso pode melhorar significativamente o desempenho da aplicação e a experiência do usuário, especialmente em casos de atualizações frequentes ou complexas.

No React 18, a Selective Rendering pode ser alcançada usando a API de Transitions e o conceito de "priorização de renderização" que foi introduzido com a nova versão.

Com a priorização de renderização, você pode controlar quais atualizações de estado são consideradas de alta prioridade e quais são de baixa prioridade, permitindo que o React adie atualizações de baixa prioridade se necessário. Isso é especialmente útil em cenários onde há várias atualizações ocorrendo simultaneamente ou em rápida sucessão.

Para implementar a Selective Rendering no React 18, você pode usar o hook useTransition. O useTransition permite que você controle e priorize a renderização de componentes e atualizações de estado, ajudando a criar experiências de usuário mais suaves e responsivas.

Aqui está um exemplo básico de como usar o useTransition para implementar a Selective Rendering:

import { useState, useTransition } from "react";

function App() {
  const [data, setData] = useState(null);
  const [background, setBackground] = useState("#fff");
  const [startTransition, isPending] = useTransition();

  const fetchData = async () => {
    startTransition(() => {
      setData(null);
    });

    const response = await fetch("/api/data");
    const result = await response.json();

    startTransition(() => {
      setData(result);
    });
  };

  const changeBackground = () => {
    setBackground((prevBackground) => (prevBackground === "#fff" ? "#f0f0f0" : "#fff"));
  };

  return (
    <div style={{ background }}>
      <button onClick={fetchData}>Carregar dados</button>
      {isPending && <p>Carregando...</p>}
      {data && <div>{JSON.stringify(data)}</div>}
      <button onClick={changeBackground}>Alterar plano de fundo</button>
    </div>
  );
}

Neste exemplo, a função fetchData é chamada quando o usuário clica no botão "Carregar dados". A transição é iniciada com a função startTransition e, enquanto a transição estiver ativa, o componente exibirá "Carregando...". Quando a transição terminar e os dados forem carregados, o componente exibirá os dados na tela.

A função changeBackground é chamada quando o usuário clica no botão "Alterar plano de fundo". Embora essa atualização de estado não esteja usando o useTransition, ela ainda será renderizada de forma eficiente devido à priorização de renderização introduzida no React 18.

A Selective Rendering no React 18 permite que os desenvolvedores criem experiências de usuário mais fluidas e otimizadas, oferecendo maior controle sobre o processo de renderização e atualização dos componentes.