Home > Article > Web Front-end > Understanding `useMemo` and `useCallback`: A Comprehensive Guide
useMemo and useCallback are two powerfull React hooks that play a crucial role in prevent un-necessary re-renders which result in optimizing component performance. They are essential tools for developers to create responsive and efficient React application.
In this guide will dive into explaining useMemo and useCallback what are their similarities and how they differ from each other. We will understand how to implement them, When to use each one.
Usually in React most calculation are fast, But sometimes you have a calculation on very large array, or some expensive computation that don't need to execute on every re-render.
useMemo and useCallback hooks can help solve this issue by caching those expensive computation between re-renders.
useMemo is React hook that caches the result of a calculation between re-renders and it takes two arguments:
To cache a calculation between re-renders wrap it a useMemo hook at the top level of the component.
useMemo(fn, dependencies)
const App = () => { const useMemo(() => { filterTodo(todos, tab) }, [todos, tab]) return(...) } export default App
Notice that the first parameter of useMemo is a function with no parameters.
The first time React will calculate the result value of first parameter of useMemo, Then memoize the second parameter which is the list of dependencies. React will cache the calculated result between re-renders and only re-calculate the result when one of the dependencies values changes.
useCallback hook is the same as useMemo hook with the only different of that this hook will cache the function (first paramter for useCallback) without calculating the value. Also the function can accept parameters unlike in useMemo.
To use useCallback you need to pass parameters:
const cachedFn = useCallback(fn, dependencies)
import { useCallback } from 'react'; export default function ProductPage({ productId }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]);
If you'r primarily concerned with optimizing the result of calculation, use useMemo.
If you're primarily concered with preventing unnecessary re-renders due to function changes, use useCallback.
Sometimes you will have a parent component that need to re-render which will result also in the re-render of child component. It's possible to cache a component using memo.
Lets assume we have a Todolist component with theme state, and a List component as child. Whenever the state of theme changes the List Component re-render which is not necessary. to solve this issue use memo.
we wrap the functional component of List with memo.
export default function TodoList({ todos, tab, theme }) { // ... return ( <div className={theme}> <List items={visibleTodos} /> </div> ); }
import { memo } from 'react'; const List = memo(function List({ items }) { // ... });
In this comprehensive guide we have understand useMemo and useCallback hooks, How to use each one of them, When to use each of them, And explained their benefits for optimizing the performance of React application.
The above is the detailed content of Understanding `useMemo` and `useCallback`: A Comprehensive Guide. For more information, please follow other related articles on the PHP Chinese website!