Understanding the Magic Behind ReactJS useMemo for Performance Boosts

UseMemo optimises performance by memoising computed values and recomputing them only when dependencies change.

Memoises Results: Stores the results of expensive computations.

Dependency-Based Execution: Recomputes only when specified dependencies change.

Improve performance: Prevents unnecessary recalculations during re-renders.

Syntax

const memoizedValues=useMemo(()=> computeExpensiveValue(a,b),[a,b]);

Applications of useMemo

Applications of useMemo involve improving rendering efficiency by preserving computed values across renders when their dependent data remains unchanged.

1. Optimising Expensive Calculations

useMemo helps avoid repeated execution of heavy computations by caching calculated results until their dependencies change.

import React, { useState, useMemo } from "react";

function App() {
    const [number, setNumber] = useState(0);
    const squaredNum = useMemo(() => squareNum(number), [number]);
    const [counter, setCounter] = useState(0);
    const onChangeHandler = (e) => {
        setNumber(e.target.value);
    };
    const counterHander = () => {
        setCounter(counter + 1);
    };
    return (
        <div className="App">
            <h1>Welcome to Geeksforgeeks</h1>
            <input
                type="number"
                placeholder="Enter a number"
                value={number}
                onChange={onChangeHandler}
            ></input>

            <div>OUTPUT: {squaredNum}</div>
            <button onClick={counterHander}>Counter ++</button>
            <div>Counter : {counter}</div>
        </div>
    );
}
function squareNum(number) {
    console.log("Squaring will be done!");
    return Math.pow(number, 2);
}
export default App;

Output:

• useState manages the number (user input) and counter (button clicks).

• useMemo caches squareNum(number), recalculating only when number changes.

• The input field updates the number state when changed.

• Clicking "Counter ++" increases the counter state.

• The component displays the input, memoised squared value, and counter.

1. What is useMemo in React?

useMemo is a React hook that lets you memoise a calculated value so React does not recompute it on every render.

2. Why do we need it?
React re-renders components whenever:

• state changes
• props change
• parent re-renders When a component re-renders, all code inside it runs again unless optimised.

If a calculation is expensive, like:

• filtering a large array
• sorting a list
• doing heavy transformation
• computing derived data from big objects then redoing it on every render can slow the app.

useMemo helps by caching the result and reusing it until dependencies change.