nickcrew/react-performance-optimization

O que react-performance-optimization faz?

Padrões de otimização de desempenho React usando memoização, divisão de código e estratégias de renderização eficiente. Use ao otimizar aplicações React lentas, reduzir o tamanho do bundle ou melhorar a experiência do usuário com grandes conjuntos de dados.

Visão Geral

Este repositório contém padrões e práticas recomendadas para otimizar o desempenho de aplicações React. Ele cobre as principais áreas de melhoria:

• Memoização: Evitar re-renderizações desnecessárias com React.memo, useMemo e useCallback.
• Divisão de Código: Reduzir o tamanho inicial do bundle com React.lazy e Suspense.
• Renderização Eficiente: Técnicas como renderização virtualizada e lazy loading para grandes conjuntos de dados.
• Profiling: Uso do React DevTools Profiler para identificar gargalos.

Padrões Implementados

1. Memoização

import React, { useMemo, useCallback } from 'react';

const ItemList = React.memo(({ items, onItemClick }) => {
  const total = useMemo(() => items.reduce((sum, item) => sum + item.value, 0), [items]);
  const handleClick = useCallback((id) => onItemClick(id), [onItemClick]);

  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => handleClick(item.id)}>
          {item.name}: {item.value}
        </li>
      ))}
      <li>Total: {total}</li>
    </ul>
  );
});

2. Divisão de Código

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Carregando...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

3. Renderização Virtualizada

Para listas grandes, use react-window ou react-virtualized:

import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Linha {index}</div>
);

function VirtualList({ items }) {
  return (
    <FixedSizeList
      height={400}
      itemCount={items.length}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}

Como Usar

1. Identifique componentes que re-renderizam com frequência usando o Profiler do React DevTools.
2. Aplique React.memo a componentes puros que recebem as mesmas props.
3. Use useMemo para valores computados caros e useCallback para funções passadas como props.
4. Implemente divisão de código em rotas ou componentes pesados com React.lazy.
5. Para listas com mais de 1000 itens, considere renderização virtualizada.

Boas Práticas

• Evite memoização excessiva; ela tem custo de memória.
• Prefira composição a herança.
• Mantenha o estado o mais próximo possível de onde é usado.
• Use chaves estáveis em listas.
• Monitore o desempenho continuamente com ferramentas de profiling.

Referências

• Documentação Oficial do React sobre Otimização
• React DevTools Profiler
• react-window