From 9e00f60063ee486445ccc2f67b7205e47c604d2b Mon Sep 17 00:00:00 2001 From: pswitchy Date: Wed, 25 Feb 2026 13:45:38 +0530 Subject: [PATCH 1/2] feat: Add term entry for React useMemo() hook #8259 --- .../concepts/hooks/terms/useMemo/useMemo.md | 71 +++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 content/react/concepts/hooks/terms/useMemo/useMemo.md diff --git a/content/react/concepts/hooks/terms/useMemo/useMemo.md b/content/react/concepts/hooks/terms/useMemo/useMemo.md new file mode 100644 index 00000000000..a505e280a97 --- /dev/null +++ b/content/react/concepts/hooks/terms/useMemo/useMemo.md @@ -0,0 +1,71 @@ +--- +Title: 'useMemo()' +Description: 'Returns a memoized value that only recalculates when one of its dependencies changes, helping to avoid expensive calculations on every render.' +Subjects: + - 'Web Development' +Tags: + - 'Components' + - 'React' +CatalogContent: + - 'react-101' + - 'paths/front-end-engineer-career-path' +--- + +The **`useMemo()`** hook is used to store the result of an expensive calculation and only recalculate it when its dependencies change. This helps to improve performance by skipping unnecessary work during re-renders. + +When a [component](https://www.codecademy.com/resources/docs/react/components) re-renders, all the code inside it runs again. If there is a slow or heavy calculation, it will run every time — even if the inputs have not changed. The `useMemo()` hook solves this by remembering (or "memoizing") the result and only recalculating when needed. + +## Syntax + +```pseudo +import React, { useMemo } from 'react'; + +const memoizedValue = useMemo(() => { + return computedResult; +}, [dependency1, dependency2]); +``` + +- The first argument is a [function](https://www.codecademy.com/resources/docs/javascript/functions) that returns the value to be memoized. +- The second argument is an [array](https://www.codecademy.com/resources/docs/javascript/arrays) of dependencies. The function will only run again when one of these values changes. +- If the dependency array is empty (`[]`), the value is calculated only once when the component first mounts. + +> **Note:** `useMemo()` is meant for performance optimization. The code should still work correctly without it — it should not be used to control when code runs. + +## Example + +In this example, a list of numbers is filtered based on a threshold value. The filtering only runs again when the `numbers` array or the `threshold` value changes, not on every render: + +```jsx +import React, { useState, useMemo } from 'react'; + +function FilteredList() { + const [threshold, setThreshold] = useState(5); + const [count, setCount] = useState(0); + + const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + + const filteredNumbers = useMemo(() => { + console.log('Filtering numbers...'); + return numbers.filter((num) => num >= threshold); + }, [threshold]); + + return ( +
+

Numbers greater than or equal to {threshold}:

+ + + +
+ ); +} +``` + +Clicking the **"Re-render"** button updates the `count` state and causes the component to re-render. But since `threshold` has not changed, `useMemo()` returns the stored result and skips the filtering step. The `console.log` will only appear when the **"Increase Threshold"** button is clicked. From eca8cfac3d9afe82d3d22a53a88a896a853c6f97 Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Thu, 26 Feb 2026 12:13:44 +0530 Subject: [PATCH 2/2] Refine useMemo documentation for clarity and accuracy --- content/react/concepts/hooks/terms/useMemo/useMemo.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/content/react/concepts/hooks/terms/useMemo/useMemo.md b/content/react/concepts/hooks/terms/useMemo/useMemo.md index a505e280a97..29642912a79 100644 --- a/content/react/concepts/hooks/terms/useMemo/useMemo.md +++ b/content/react/concepts/hooks/terms/useMemo/useMemo.md @@ -2,6 +2,7 @@ Title: 'useMemo()' Description: 'Returns a memoized value that only recalculates when one of its dependencies changes, helping to avoid expensive calculations on every render.' Subjects: + - 'Computer Science' - 'Web Development' Tags: - 'Components' @@ -11,14 +12,14 @@ CatalogContent: - 'paths/front-end-engineer-career-path' --- -The **`useMemo()`** hook is used to store the result of an expensive calculation and only recalculate it when its dependencies change. This helps to improve performance by skipping unnecessary work during re-renders. +The **`useMemo()`** hook memoizes the result of a computation and recomputes it only when one of its dependencies changes. It is primarily used to optimize performance by avoiding unnecessary recalculations during re-renders. When a [component](https://www.codecademy.com/resources/docs/react/components) re-renders, all the code inside it runs again. If there is a slow or heavy calculation, it will run every time — even if the inputs have not changed. The `useMemo()` hook solves this by remembering (or "memoizing") the result and only recalculating when needed. ## Syntax ```pseudo -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; const memoizedValue = useMemo(() => { return computedResult; @@ -26,7 +27,7 @@ const memoizedValue = useMemo(() => { ``` - The first argument is a [function](https://www.codecademy.com/resources/docs/javascript/functions) that returns the value to be memoized. -- The second argument is an [array](https://www.codecademy.com/resources/docs/javascript/arrays) of dependencies. The function will only run again when one of these values changes. +- The second argument is an [array](https://www.codecademy.com/resources/docs/javascript/arrays) of dependencies. React performs a shallow comparison of these values and only recomputes when one changes. - If the dependency array is empty (`[]`), the value is calculated only once when the component first mounts. > **Note:** `useMemo()` is meant for performance optimization. The code should still work correctly without it — it should not be used to control when code runs. @@ -68,4 +69,4 @@ function FilteredList() { } ``` -Clicking the **"Re-render"** button updates the `count` state and causes the component to re-render. But since `threshold` has not changed, `useMemo()` returns the stored result and skips the filtering step. The `console.log` will only appear when the **"Increase Threshold"** button is clicked. +Clicking the re-render button updates the `count` state and causes the component to re-render. But since `threshold` has not changed, `useMemo()` returns the stored result and skips the filtering step. The `console.log` will only appear when the increase threshold button is clicked.