Otimizar reaja a maneira certa para explodir aplicativos rápidos

A criação de aplicativos de reação rápida e responsiva vai além da escrita do código funcional, mas também inclui garantir que ele tenha um desempenho ideal. Os usuários esperam que as páginas sejam carregadas instantaneamente, role sem problemas e respondam sem atraso, por mais complexo que o aplicativo se torne. No entanto, à medida que os aplicativos do React crescem, os tamanhos dos pacote aumentam, os componentes renderizam desnecessariamente e listas pesadas diminuem o desempenho. A boa notícia é que o React fornece várias técnicas poderosas de otimização que mantêm os aplicativos saborosos, mantendo o código moderno limpo e moderno. O primeiro passo em direção a aplicativos mais rápidos inicia antes que o navegador execute seu código: o tamanho do próprio pacote. Se o seu pacote JavaScript estiver inchado, os problemas de desempenho aparecerão antes que seu aplicativo tenha a chance de carregar. É aí que entra a otimização do pacote. Otimização do pacote quando você executa uma construção, ferramentas como Webpack, Vite ou Rollup Package o código -fonte e suas dependências em um ou mais pacotes. Esses pacotes são os arquivos JavaScript que o navegador baixa e usa para carregar a funcionalidade de um aplicativo. Técnicas de otimização de feixes são processos que reduzem o tamanho e melhora a eficiência desses feixes. Os pacotes mais leves produzem aplicativos mais rápidos e melhores pontuações de desempenho nos vitais principais, como LCP (maior tinta conteúdo) e TTI (tempo para interativo). Os seguintes métodos podem ser usados para melhorar o tamanho do pacote do React Apps: agitação de árvores: esta é uma forma de eliminação do código morto. Importação e funções não utilizadas adicionam ao tamanho do pacote de um aplicativo React. O tremor de árvores remove qualquer código importado, mas nunca usado. Especialmente com os módulos ES6, as importações podem ser limitadas a funções específicas necessárias em um projeto em vez de toda a biblioteca. Além disso, quando as importações do módulo ES6 são usadas, pacotes como Vite/Webpack executam automaticamente agitação de árvores. (Commonjs não fica agitado). Usando a biblioteca Date-FNS para um exemplo // ❌ Evite importar toda a biblioteca Date-FNS // ✅ Importar apenas as funções necessárias importam o formato de ‘data-fns/formato’; A diferença de importação indica de ‘date-fns/diferenças’; const Today = new Date (); const NextWeek = nova data (hoje); nextWeek.setDate (Today.getDate () + 7); console.log (formato (hoje, ‘yyyy-mm-dd’)); // 2025-08-20 Console.log (diferenças de diferenças (NextWeek, hoje)); // 7 Digite a divisão do código do modo de tela cheia de tela cheia: em vez de enviar um arquivo JavaScript enorme, divida seu pacote em pedaços menores que podem ser acessados de forma independente quando forem necessários. Embora a divisão de código também possa ser feita no nível do roteador, dividindo rotas com o React Router, outra abordagem prática é com o React.Lazy and Suspense. const HeavyChart = React.Lazy (() => importar (“./ Chart”)); Function Dashboard () {return (gráfico de carregamento …}>); } Digite o modo de tela fullcreen Sair Modo de tela completa Explicação: React.Lazy garante que o concorrente do ChartComponent seja importado dinamicamente apenas quando é realmente necessário. Em vez de agrupar o gráfico no arquivo JavaScript principal, ele cria um pedaço separado (divisão de código) que reduz o tamanho inicial do pacote. Como o React.Lazy carrega assíncrono, o suspense atua como um invólucro que mostra uma interface do usuário de fallback (gráfico de carregamento …) enquanto o componente HeavyChart está sendo buscado. Depois que seu aplicativo estiver em execução, o processo de renderização da React se torna o próximo gargalo. É aí que as técnicas de memórias ajudam a manter sua interface do usuário. 💡 Nota: Outras técnicas de otimização de pacote não abordadas neste artigo incluem minificação de código, cache, analisadores de pacote e importações dinâmicas. O aumento do desempenho do React com memórias (React.Memo, UsoMemo e UseCallback) à medida que os aplicativos do React crescem, um dos problemas de desempenho mais comuns são as renderizações desnecessárias. Toda vez que o estado ou os adereços mudam, reaja renderiza os componentes para sincronizar a interface do usuário. Embora isso seja ótimo, muitas vezes o React acaba fazendo muito trabalho quando nada realmente mudou. A memaçãoização ajuda a reagir para lembrar o resultado de uma função ou componente, de modo que o React não a renderize a menos que algo importante mude. Isso pode ser alcançado com três das ferramentas incorporadas do React. React.Memo: Por padrão, quando um componente pai se renderiza, todos os seus filhos também renderizam-mesmo que seus adereços não mudassem. Para corrigir esse problema de desempenho, envolver esse componente infantil no React.Memo, na verdade, diria a React: “Somente renderize esse componente se seus adereços foram alterados mesmo se seu pai for renderizado novamente” Exemplo: importar reagir de “React”; // componente filho envolto em react.memo const usercard = react.memo (function usercard ({name}) {return {name};}); Exportar App de função padrão () {const [count, setCount] = React.usestate (0); return (setCount (contagem + 1)}> aumento: {count} {count} {/ * usercard não renderá quando a contagem for alterada */}); } Digite o modo de saída de tela cheia agora, clicando no botão renderiza o pai, mas o UserCard não renderiza novamente, pois seus adereços (nome) permaneceram os mesmos. UsoMemo: Às vezes, os cálculos caros da memória, como filtrar uma grande lista, são executados dentro de um componente. Se o componente renderizar e recalcular sempre, resíduos vitais de capacidade de processamento. UsoMemo cache o resultado de um cálculo até que suas dependências mudem. Exemplo: importar react, {useememo, usestate} de “react”; função app () {const [count, setCount] = usestate (0); const [items] = usestate (Array.From ({Length: 10000}, (_, i) => i)); // computação cara (soma dos números) const total = useMememo (() => {console.log (“calculando …”); retorna item.reduce ((a, b) => a + b, 0);}, [items]); // recalcula apenas se `itens` alterações retornar (total: {total} setCount (contagem + 1)}> aumento {count}); } Digite o modo de tela fullcreen Sair Modo de tela cheia Explicação: Este componente calcula a soma de 10.000 números uma vez, mostra na tela e permite aumentar o contador sem executar novamente o cálculo caro a cada vez. Usecallback: No React, as funções são recriadas toda vez que um componente renderiza. Passar essas “novas” funções para baixo, pois os adereços podem fazer com que os componentes crianças renderizem novamente. O USECallback resolve isso em cache na própria função até que suas dependências mudem. ** Exemplo: importar react, {usestate, usecallback} de “react”; const Child = react.memo (({onclick}) => {console.log (“criança renderizada”); retornar clique em mim;}); função app () {const [count, setCount] = usestate (0); // Sem USECallback, uma nova função é criada a cada render const handleclick = usecallback (() => {console.log (“Clicked”);}, []); // permanece o mesmo, a menos que as dependências alterem o retorno ({count} setCount (contagem + 1)}> aumento); } Digite o modo de tela fullcreen Sair Modo de tela cheia Advertência: O uso excessivo de memórias pode prejudicar o desempenho. React.memo adiciona sobrecarga de comparação. Boa regra: use-a quando os renderizadores forem caros, não em toda parte. A memaçãoização reduz o trabalho desperdiçado dentro dos componentes, mas e se o seu aplicativo tiver que renderizar milhares – ou mesmo centenas de milhares – de itens de uma só vez? Esse é um desafio completamente diferente. Nesses casos, a janela da lista é a chave para manter a rolagem suave e as interações rápidas. Lista de janelas O que é a janela da lista? Ao lidar com grandes listas com milhares de linhas ou células de grade, renderizando tudo de uma só vez mata o desempenho e diminui a velocidade dos aplicativos React. A janela da lista é uma técnica que corrige esse gargalo dividindo grandes dados em pedaços menores e tornando apenas o que é visível na viewport. Essa abordagem atualiza dinamicamente a interface do usuário com itens recém -renderizados à medida que os usuários rolam através de uma interface responsiva e totalmente com desempenho. Reactar a janela virtualizada e reagir (uma alternativa leve com tamanho de pacote menor e API mais simples), e o carregador de reagir-Window-Infinite são pacotes de nó para implementar a janela da lista em vários contextos. Exemplo com o React Virtualizado para usar o React Virtualizado para otimizar uma lista, instale a biblioteca com o comando: npm install react-virtualized–salva-se que o componente abaixo mostra um exemplo simples da biblioteca em uso: importar {usestate, usecallback} de “react”; importar {list, autosizer} de “react-virtualized”; // Função de utilidade para gerar uma lista de itens (Item 1, Item 2,…) Geratelist Geratelist (Size) {return Array.From ({Length: size}, (_, index) => `item $ {Index + 1}`); } exportar função padrão virtualizedlist () {// estado para desencadear uma renderização (para fins de demonstração) const [triggerRerender, setTriggerRerender] = usestate (false); // declare para manter a lista gerada de itens const [items, setItems] = Usestate ([]); // manipulador: gera uma lista de 100000 itens e, em seguida, força uma renderização após 1s const handleGeneratelist = () => {setItems (generatelist (100000)); setTimeout (() => {setTriggerRender ((prev) =>! prev); // alterna boolean, renderiza o componente}, 1000); }; // Renderizador de linha: informa à lista como renderizar cada linha // `style` é necessário para o posicionamento adequado const rowrenderer = usecallback (({key, índice, estilo}) => ({itens[index]}),
[items]
); Retorne ({/ * Botão para gerar a lista */} Gere a lista {/ * contêiner para lista virtualizada com altura fixa */} {/ * Autosizer passa a largura/altura disponível para listar */} {({largura, altura}) => ()}); } Digite o modo de saída de tela cheia de tela cheia aqui está uma visualização de e caixa de códigos de react-virtualizada. Advertência: a virtualização pode afetar a acessibilidade. (Os leitores de tela não podem ler itens ocultos). No final do dia, os usuários não se importam com pacotes, renderizações ou virtualização; Eles se preocupam com aplicativos que parecem instantâneos. Ao aparar feixes, evitar renderizações desperdiçadas e renderizar apenas o que é necessário, você entrega velocidade sem comprometer. Eu adoraria ouvir seus pensamentos também. Se você tiver dúvidas sobre essas técnicas – ou se você enfrentar desafios de desempenho em seus próprios projetos de reação -, os comentários nos comentários. Escrevi esta peça porque vi como os aplicativos lentos frustrantes podem ser e sei que essas estratégias podem fazer uma diferença real. Seus comentários e perguntas podem desencadear ainda mais discussões e ajudar outras pessoas que estão enfrentando os mesmos problemas.

Fonte