useMemo & useCallback

useMemo memoizes expensive calculations. useCallback memoizes functions to prevent unnecessary re-renders.

Syntax

REACT

1
2

const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b]);
const memoizedFn = useCallback(() => doSomething(a), [a]);

useMemo and useCallback

REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

function App() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState("");

    const expensive = useMemo(() => {
        console.log("Computing...");
        return count * 2;
    }, [count]);

    const handleClick = useCallback(() => {
        console.log("Clicked!");
    }, []);

    return (
        <div>
            <p>Doubled: {expensive}</p>
            <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
            <input value={text} onChange={e => setText(e.target.value)} />
        </div>
    );
}

Try It Yourself

Practice

1

Exercise

Practice this concept.

Answer

Write the code as shown above.

Quick Quiz

1

What did you learn?

Concept A

Concept B

Concept C

Concept D

This covers the basics.

Retry Quiz

Interview Questions

Explain this concept.

It is a fundamental React feature.

Previous

useReducer Hook

Tutorial Complete

Back to React