React é rápido… mas será que sempre?

Vamos combinar: o React é uma ferramenta poderosa. Ele nos permite criar interfaces de usuário de forma eficiente e organizada. Mas, como toda ferramenta, se não for usada com cuidado, pode acabar nos deixando na mão quando o assunto é performance.

O paradoxo do React

React é conhecido por sua rapidez e eficiência. No entanto, é fácil cair na armadilha de pensar que, só por estar usando React, nosso aplicativo será automaticamente rápido. A verdade é que, sem atenção, podemos acabar com aplicações lentas e pesadas. Por exemplo, um desenvolvedor conseguiu reduzir o tamanho do seu site de 187 KB para apenas 9 KB ao trocar o React pelo Svelte . Isso nos faz refletir: será que estamos usando o React da melhor maneira possível?

Pensa comigo, o React foi criado pela equipe do Facebook, eles estão mais focados em aplicações do que em sites, além disso, provavelmente você não usa todos os recursos que o React oferece, então reflita: Será que realmente precisamos utilizar React para criar um pequeno site ?

Dicas para manter o React ágil

Felizmente, existem várias práticas recomendadas para otimizar a performance de aplicações React:

• Evite renderizações desnecessárias: Use React.memo, useMemo e useCallback para evitar que componentes sejam renderizados sem necessidade.

• Utilize renderização condicional: Em vez de esconder componentes com CSS, condicione sua renderização para que eles nem sejam montados no DOM quando não forem necessários.

Por exemplo:

Aqui o ambos os componentes estão sendo criados:

function App() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  return (
    <div>
      <h1>Bem-vindo ao site!</h1>
      <LoginButton style={{ display: isLoggedIn ? 'none' : 'block' }} />
      <LogoutButton style={{ display: isLoggedIn ? 'block' : 'none' }} />
    </div>
  );
}

Aqui, apenas um botão será renderizado, dependendo do estado isLoggedIn. O outro componente nem aparece no DOM:

function App() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  return (
    <div>
      <h1>Bem-vindo ao site!</h1>
      {isLoggedIn ? <LogoutButton /> : <LoginButton />}
    </div>
  );
}

• Divida seu código: Implemente o code splitting com React.lazy e Suspense para carregar partes do código apenas quando necessário, melhorando o tempo de carregamento inicial.

• Virtualize listas longas: Use bibliotecas como react-window para renderizar apenas os itens visíveis em listas grandes, economizando recursos.

• Gerencie o estado com sabedoria: Evite usar Redux para tudo; prefira o estado local quando possível para reduzir a complexidade e melhorar a performance.

No fim das contas, o React é uma ferramenta incrível, mas não faz milagres por conta própria. Cabe a nós, desenvolvedores, usá-lo com consciência e atenção aos detalhes. Afinal, performance não é apenas sobre velocidade, mas sobre proporcionar uma experiência fluida e agradável para o usuário.

Fontes: Aqui