Memoization — Complete Guide

Memoization — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.

8 min read Updated 7/8/2026

On this page

React.js Tutorial · Lesson 62 of 100

Memoization

Beginner ✓ → Intermediate ✓ → Advanced → Professional

Advanced · 3 — Production skills · ~18 min read · Module 7: Performance

Introduction

This is advanced material: Memoization. It is what teams use on live products. Read the example carefully and try changing one line at a time to see what happens. Memoization means caching a computed result and reusing it until inputs change. In React: useMemo for values, useCallback for functions, React.memo for components. Expensive calculations or huge child trees can slow typing and scrolling. Memoization skips redundant work.

Do not optimize early. First make it work, then measure, then fix what is actually slow.

When will you use this?

Apply when users complain the app feels slow, or Lighthouse shows red scores.

Slow admin tables with thousands of rows need memo, lazy load, or virtualization.
Lighthouse scores matter for public sites — clients notice slow pages.

Real-world: commission calculation cache

Seller dashboard recalculates commission only when order list reference changes — not when unrelated theme toggle updates.

Production-style code

function SellerDashboard({ orders, theme }) {
  const stats = useMemo(() => ({
    revenue: orders.reduce((s, o) => s + o.total, 0),
    commission: orders.reduce((s, o) => s + o.total * o.rate, 0)
  }), [orders]);

  return (
    <div className={theme}>
      <Kpi label="Commission" value={stats.commission} />
    </div>
  );
}

What happens in production: Measure first — memoize hot paths in tables and charts where profiling shows wasted work.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

const sorted = useMemo(
  () => [...items].sort((a, b) => a.price - b.price),
  [items]
);

Line-by-line walkthrough

Code	What it means
`const sorted = useMemo(`	Part of the Memoization example — read it together with the lines before and after.
`() => [...items].sort((a, b) => a.price - b.price),`	Defines a function — often a component or event handler.
`[items]`	Part of the Memoization example — read it together with the lines before and after.
`);`	Closes a block started by { or ( above.

How it works (big picture)

Sort runs only when items reference changes.
If items is the same array, sorted is reused from last render.

Do this on your computer

Profile with React DevTools Profiler.
Memoize only hot paths.
Ensure stable dependencies.
Read the real-world section and name which part of the app uses this topic.
Run the example locally and confirm the same behavior in the browser.
Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

Change text or labels in the example and save — watch the browser update.
Break the code on purpose (remove a bracket), read the error message, then fix it.
Open React DevTools (browser extension) while running Memoization and inspect component props/state.

Remember

useMemo caches values. Profile first, memo second. Stable deps required.

Common questions

Memoization always faster?

No — small lists do not need it.

How long should I spend on Memoization?

Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new hook or routing topic; setup lessons may take one afternoon.

What if I get stuck on Memoization?

Re-read the line-by-line walkthrough, check the browser console for red errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.

Where is Memoization used in real jobs?

See the real-world section above — the same pattern appears in LMS, banking, e-commerce, and SaaS products. Interviewers ask you to explain it using one concrete example from your project or this lesson.

Questions on this lesson 0

No questions yet — be the first to ask!