Busting React App O desempenho do aplicativo é crucial para uma experiência positiva do usuário. Este artigo descreve sete padrões de desempenho comprovados obtidos na otimização de numerosos aplicativos de reação de produção.

1. memando com useememo e usecallback :

Problem: renderizadores desnecessários devido a adereços ou estado inalterados.

solução: cache operações computacionalmente caras e referências de função.

const ExpensiveComponent = ({ items }) => {
  const sortedList = useMemo(() => items.sort((a, b) => a.price - b.price), [items]);
  const handleClick = useCallback(() => {
    console.log('Item clicked:', sortedList[0]);
  }, [sortedList]);
  return ;
};

as práticas recomendadas: Use com react.memo para componentes filhos para evitar atualizações desnecessárias de subtree. Ideal para cálculos complexos (classificação, filtragem), retornos de chamada passados ​​para crianças otimizadas e valores estáveis ​​do provedor de contexto.

2. carregamento e divisão de código Lazy:

Problem: grande tamanho inicial do pacote impactando a primeira tinta conteúdo (fcp).

Solução: Dynamic Imports e Suspense para carregamento sob demanda.

const HeavyChartLibrary = React.lazy(() => import('./ChartComponent'));

const Dashboard = () => (
  }>
    {showCharts && }
  
);

avançado: integrar com o roteador React para divisão de código baseada em rota.

3. listas virtualizadas para conjuntos de dados grandes:

Problem: renderizando milhares de itens sobrecarregar o dom.

solução: react-window renderiza apenas itens visíveis.

import { FixedSizeList } from 'react-window';

const BigList = ({ items }) => (
  
    {({ index, style }) => (
      
...
    )}
  
);

bônus: use variablesizelist para alturas de linha dinâmica e react-virtualized-auto-sizer para contêineres responsivos.

4. gerenciamento de estado eficiente:

Problem: Atualizações de estado múltiplas causando renderizadores em cascata.

Solução: alavancar o reacto de 18 lote automático de 18.

react 18:

setCount(1);
setText('Updated'); // Single re-render

pré-reagt 18 ou para cenários complexos: use userEducer para atualizações de estado atômico.

5. API Debouncing Calls:

Problem: solicitações excessivas da API da entrada rápida do usuário (por exemplo, barras de pesquisa).

Solução: um personalizado usedebounce Hook.

import { useEffect, useState } from 'react';

const useDebouncedValue = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
};

pro Tip: Combine com abortcontroller para cancelar solicitações pendentes.

6. API de contexto otimizada:

Problem: renderizadores desnecessários dos consumidores de contexto devido a alterações não relacionadas.

Solução: dividir contextos e Memoize Provider valores.

7. atualizações da interface do usuário otimistas:

Problem: lenta interface da interface do usuário devido a esperar pela API Responses.

solução: Forneça feedback visual imediato e reversão no erro.

Performance CheckList:

1. perfil renderiza com o React Devtools Profiler.
2. Analise o tamanho do pacote com fonte-map-explorer.
3. Teste com a guia Performance do Chrome (estrangulamento da CPU).
4. use react.memo , useememo , usecallback estrategicamente.
5. implementar carregamento incremental.
6. otimize imagens/mídia com carregamento preguiçoso.
7. Considere a renderização do lado do servidor para conteúdo crítico.

lembre -se: perfil Primeiro, otimize o segundo! Essas técnicas são aplicáveis ​​em várias estruturas do React (Next.js, Gatsby, etc.).