Suggest an editImprove this articleRefine the answer for “When should you use useMemo()”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`useMemo()`** returns the **result of the function** you passed in, and React **remembers (caches)** that result, returning it again if the dependencies have not changed. **Key point:** use `useMemo` only if the computation is genuinely heavy or if it is passed as a prop to a `React.memo` component.Shown above the full answer for quick recall.Answer (EN)Image## What `useMemo()` returns ```javascript const memoizedValue = useMemo(() => computeSomething(a, b), [a, b]); ``` `useMemo()` returns the **result of the function** you passed in. React **remembers (caches)** that result and **returns it again** if the dependencies `[a, b]` have not changed. > In simple terms: > `useMemo` returns a **value that is not recalculated** unless it needs to be. ### Example: ```javascript const doubled = useMemo(() => count * 2, [count]); ``` If `count` does not change -> `useMemo` **returns the old value** of `doubled`, and the function `() => count * 2` **does not run** again. --- ## When you should use `useMemo()` `useMemo` is a **performance optimization** tool, so it should be used **deliberately, and only where it is justified**. --- ### Use `useMemo` when: #### 1. There are **heavy computations** (sorting, filtering, long loops, large computations) ```javascript const sortedUsers = useMemo(() => { console.log("Sorting..."); return [...users].sort((a, b) => a.name.localeCompare(b.name)); }, [users]); ``` Without `useMemo`, the sorting would run on every render, even if `users` did not change. --- #### 2. You want to **avoid unnecessary re-renders** of child components ```javascript const filtered = useMemo( () => users.filter(u => u.active), [users] ); return <UserList users={filtered} />; ``` If `UserList` is wrapped in `React.memo`, it **will not re-render** until `filtered` changes. Without `useMemo` a **new array would be created on every render**, and `UserList` would think the `users` prop had changed. --- #### 3. You need to **memoize derived data** ```javascript const totalPrice = useMemo( () => cart.reduce((sum, item) => sum + item.price, 0), [cart] ); ``` The total is recalculated only when `cart` changes. --- #### 4. You use **complex computations inside** `useEffect` **or** `useCallback` Sometimes `useMemo` helps **stabilize dependencies** so the effect is not called unnecessarily. --- ### You should not use `useMemo` when: | Case | Why not | |---|---| | The computation is light (for example, `a + b`) | The optimization costs more than the computation itself | | Code written as "insurance" against re-renders | React is already optimized | | You want to "speed up everything" | Premature optimization makes the code confusing | --- ## An important rule > Use `useMemo` **only if the computation is genuinely heavy** > or if **it is passed as a prop** to a `React.memo` component. --- ## Summary | Question | Answer | |---|---| | What does `useMemo()` return | The memoized (cached) value of the function | | When it is recalculated | Only if the dependencies changed | | When to use it | For heavy computations or to avoid unnecessary re-renders | | When not to use it | For light expressions - it will only complicate the code | | Alternative for functions | `useCallback()` (it caches the function itself, not a value) | </content>For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.