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.
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.
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 (); }; export default ParentComponent;Count: {count}
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.
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.
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" />); }; export default ExpensiveComponent;{filteredItems.map((item, index) => (
- {item}
))}
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.
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.
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