This content originally appeared on DEV Community and was authored by Bruno Pinela
React re-renders components every time state or props change, which is great for keeping things up-to-date. But, it can also cause performance issues if you're doing heavy calculations on every render. That’s where useMemo comes in!
useMemo is a hook that caches the result of a function so it doesn’t have to run again unless its dependencies change
How It Works:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useMemo takes two arguments: a function and an array of dependencies;
It’ll only re-run the function if one of the dependencies changes
When Should You Use It?
- Expensive Calculations: If you have slow computations, wrap them in useMemo so they don’t run on every render
- Prevent Unnecessary Re-renders: When passing objects or arrays as props, use useMemo to avoid them being recreated on each render, which could trigger unnecessary re-renders of child components
Example:
Without useMemo:
const result = computeExpensiveValue(a, b); // Runs on every render
With useMemo:
const result = useMemo(() => computeExpensiveValue(a, b), [a, b]); // Runs only when `a` or `b` change
When NOT to Use It:
Don’t overuse it! If your calculations are lightweight, adding useMemo won’t really help and might even slow things down. Use it when you have a clear performance problem
In Short:
Keep things simple and don’t optimize until you actually see performance issues :)
This content originally appeared on DEV Community and was authored by Bruno Pinela
Bruno Pinela | Sciencx (2024-10-18T00:48:40+00:00) Understanding useMemo. Retrieved from https://www.scien.cx/2024/10/18/understanding-usememo/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.