✳flâneur — a map of the web's best reading

useMemo – React

react.dev · 5,523 words · saved by 1 readers

calculateValue: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On next renders, React will return the same value again if the dependencies have not changed since the last render. Otherwise, it will call calculateValue, return its result, and store it so it can be reused later. dependencies: The list of all reactive values referenced inside of the calculateValue code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is configured for React, it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like [dep1, dep2, dep3]. React will compare each dependency with its previous value using the Object.is comparison. On the initial render, useMemo retur

API Reference Hooks Copy page Copy useMemo useMemo is a React Hook that lets you cache the result of a calculation between re-renders. const cachedValue = useMemo ( calculateValue , dependencies ) Note React Compiler automatically memoizes values and functions, reducing the need for manual useMemo calls. You can use the compiler to handle memoization automatically. Reference useMemo(calculateValue, dependencies) Usage Skipping expensive recalculations Skipping re-rendering of components Preventing an Effect from firing too often Memoizing a dependency of another Hook Memoizing a function Troub

Explore this link on the map →

related reading