01 / Foundation
Understand the concept
Memoization is an optimization technique that stores the result of expensive function calls and reuses the cached value for identical inputs.
In React, memoization helps reduce unnecessary computations and renders using tools like React.memo, useMemo, and useCallback.
02 / Implementation
Using useMemo
memoization.tsx
import { useMemo, useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
const expensiveValue = useMemo(() => {
console.log("Calculating...");
return count * 100;
}, [count]);
return (
<>
<p>{expensiveValue}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</>
);
}04 / Interview