"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Ganchos `useCallback` vs `useMemo`

Ganchos `useCallback` vs `useMemo`

Publicado em 2024-11-09
Navegar:620

`useCallback` vs `useMemo` Hooks

Aumentando o desempenho do React: useCallback vs. useMemo Hooks

Os ganchos useCallback e useMemo do React são cruciais para otimizar o desempenho em seus aplicativos. Compreender quando e como usá-los pode evitar novas renderizações desnecessárias e garantir que seu aplicativo funcione sem problemas. Neste artigo, mergulharemos em exemplos reais de uso eficaz de useCallback e useMemo.

Quando usar useCallback

O gancho useCallback retorna uma versão memorizada da função de retorno de chamada, o que significa que ele apenas recria a função se uma de suas dependências for alterada. Isso é particularmente útil ao passar funções como adereços para componentes filhos para evitar que eles sejam renderizados novamente desnecessariamente.

Exemplo em tempo real: evitando novas renderizações desnecessárias

Suponha que você tenha um componente pai que passa uma função para um componente filho. Sem useCallback, o componente filho seria renderizado novamente toda vez que o componente pai fosse renderizado, mesmo que a lógica da função não tivesse mudado.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count   1);
  }, [count]);

  return (
    

Count: {count}

); }; export default ParentComponent;

No exemplo acima, handleIncrement é memorizado com useCallback. O ChildComponent só será renderizado novamente quando a contagem for alterada, evitando novas renderizações desnecessárias e melhorando o desempenho.

Quando usar useMemo

O gancho useMemo é usado para memorizar o resultado de uma função, recalculando o resultado armazenado em cache apenas quando uma de suas dependências muda. É útil para otimizar o desempenho em situações em que uma função executa um cálculo caro.

Exemplo em tempo real: otimizando cálculos caros

Digamos que você tenha um componente que executa uma operação computacionalmente cara, como filtrar uma lista grande.

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

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    
setFilter(e.target.value)} placeholder="Filter items" />
    {filteredItems.map((item, index) => (
  • {item}
  • ))}
); }; export default ExpensiveComponent;

Neste exemplo, useMemo é usado para armazenar em cache o resultado da filtragem da matriz de itens. Dessa forma, a dispendiosa operação de filtragem só é recalculada quando os itens ou o filtro são alterados, evitando cálculos desnecessários.

Diretrizes para usar useCallback e useMemo

  • Use useCallback ao passar funções para componentes filhos para evitar novas renderizações desnecessárias.
  • Use useMemo para cálculos caros que não precisam ser recalculados em cada renderização.
  • Evite usá-los em excesso. A memorização adiciona complexidade e às vezes pode dificultar a leitura do código. Use-os apenas quando identificar um problema de desempenho.
  • Lembre-se da matriz de dependências. Sempre especifique as dependências com precisão; caso contrário, você poderá encontrar bugs ou comportamentos inesperados.

Conclusão

Os ganchos useCallback e useMemo do React são ferramentas poderosas para otimizar o desempenho do componente, evitando novas renderizações desnecessárias e cálculos caros. Ao aplicar cuidadosamente esses ganchos, você pode garantir que seu aplicativo React seja executado com eficiência.

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/sivamani18/usecallback-vs-usememo-hooks-4gj8?1 Se houver alguma violação, entre em contato com [email protected] para excluí-la
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3