ReactJS useMemo Hook

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: