Memoization is a technique used to improve performance by optimizing and storing the results of expensive functions. This is done by caching results and returning cached results when the same calls occur again with no change.
Like your brain, the computer uses its memory to perform programs. Just like you don’t have to go back to relearn information you remember, the computer uses previously cached results when there is no change instead of performing the task again.
Memoization in React
Memoization in React can be achieved with the following:
React is a JavaScript library used to build user interfaces for the web. On the premise that you’re not a beginner, I’ll be talking about how to achieve memoization in React.
React’s useMemo
The useMemo hook that React offers is used to cache the results of expensive functions.
It simply caches the result of the computation, and only when the dependencies or arguments change would it recalculate the computation.
const valueToBeMemoized = useMemo(function(){},[dependencies])
const memoizedValue = useMemo(() => {
return expensiveComputationFunction(args);
}, [args]);
Whenever the argument(args) changes, the memoizedValue reruns the expensiveComputationFunction and stores its value. If useMemo is to be used in your application, make sure the function doesn't modify any external state, i.e., the function should only be based on its input and not hold the power to mutate values outside its scope.
React.memo()
A memoized component changes only when the props are changed. Like the useMemo hook, the main thing here is dependencies/props that do not mutate often. Essentially, this tells React that if props don't change, don't rerender the component, use the existing component instead.
React useCallback
The useCallback function, unlike React.memo, caches functions if the dependencies are unchanged.
In JavaScript, when applications are run, functions generate references. With every rerender, the function generates a new reference. The useCallback creates a function once and memoizes its identity(the reference).
const functionName = useCallback(() => {
//function to be performed
}, [args]);
Each render === a new function reference. useCallback helps reduce this.
When to memoize
If a certain component is slow due to expensive functions, and you notice a drag in website responsiveness.
A function has to perform expensive functions, but the props rarely change.
If the component isn’t going to be mutated often, memoize it to reduce rerenders, for example, if you have a component dependent on a form.
When not to memoize
Cheap/fast components: if it's not an expensive function.
Props change frequently anyway
Premature optimization: Memoization should not be your initial go-to for performance optimization.
React Update
On the 7th of October, React launched the stable React Compiler 1.0. This new update works to automatically optimize components and hooks, reducing the need for manual memoization.
To install :
npm install --save-dev --save-exact babel-plugin-react-compiler@latest
You can read more: https://react.dev/blog/2025/10/07/react-compiler-1
When working on an existing application, slowly inject this new update into your application instead of an all-out refactor.
Remember: Test before memoizing, optimize before memoizing, as overuse of memoization can lead to performance issues.
There are other use cases for memoization, but overusing memoization impacts performance as well. Try to optimize your application without the need for memoization and understand the problem you're trying to fix and whether to memoize is the right thing to do.
Top comments (0)