React 15: Use Memo Hook

Previous Blog
React 14: Using images in React

Let me tell you a small story — one you’ve probably lived through yourself.

You’re building a simple React component.
Just an input box, a dark/light theme toggle, and a number that doubles.
Nothing fancy… until something feels off.

You click the Change Theme button and — hmm — the app hesitates.
Just a tiny lag, so tiny you almost convince yourself it’s “probably fine”.
But you know your gut: something’s re-rendering too often.

And that’s the moment many React developers meet a quiet little hero: useMemo.

Let’s unfold this story from the beginning.

🧠 What Exactly Is useMemo?

useMemo is a React hook that remembers the result of a function so React doesn’t have to redo the same expensive work every time your component re-renders.

Think of useMemo as React’s way of saying:

“Hey, I’ve already done this. Why do it again?”

It lets you store the result of a calculation and reuse it across renders —
as long as its dependencies haven’t changed.

It’s not flashy.
It doesn’t stop your component from rendering.
It just prevents wasted work.

And honestly? That’s often all you need.

📘 The Syntax — The Calm Before the Storm

Here’s the entire hook in a single breath:

const memoizedValue = useMemo(() => {
  return expensiveFunction(dependency);
}, [dependency]);

You tell React:

• Here’s a task → expensiveFunction
• Here’s when to redo it → [dependency]

If the dependency stays the same, React returns the previous result from memory.
Fast. Quiet. Efficient.

🔥 The Problem — Where Everything Starts to Slow Down

In our example, we had a harmless-looking function:

import React, { useState } from 'react';

export default function App() {
  
  const [number, setNumber] = useState(0);
  const [dark, setDark] = useState(false);

  const doubleNumber = slowFunction(number);

  const themeStyles = {
    backgroundColor: dark ? 'black' : 'white',
    color: dark ? 'white' : 'black'
  };

  return (
    <>
      <input
        type="number"
        value={number}
        onChange={e => setNumber(parseInt(e.target.value))}
      />
      <button onClick={() => setDark(prevDark => !prevDark)}>
        Change Theme
      </button>
      <div style={themeStyles}>{doubleNumber}</div>
    </>
  );
}

function slowFunction(num) {
  console.log('Calling Slow Function');
  for (let i = 0; i <= 1000000000; i++) {}
  return num * 2;
}

Stackblitz Link
https://stackblitz.com/edit/react-use-memo-hook-start?file=src%2Fcomponents%2FCounterComponent.js

And inside the component:

const doubleNumber = slowFunction(number);

Here’s the tricky part:
every time anything in the component changes — even the theme — React re-runs this slow function.

You toggle dark mode?
Slow function runs.

You type in another field?
Slow function runs.

You blink too hard?
Feels like it runs again.

That’s the moment you realize the UI isn’t lagging — your code is.

🚀 How useMemo Steps In (The Plot Twist)

The fix feels almost unfair:

import React, { useState, useEffect, useMemo } from 'react';

export default function App() {
  
  const [number, setNumber] = useState(0);
  const [dark, setDark] = useState(false);

  const doubleNumber =  useMemo( () => slowFunction(number), [number]);

  const themeStyles =  useMemo( () => {return{
    backgroundColor: dark ? 'black' : 'white',
    color: dark ? 'white' : 'black'
  }}, [dark]);

  useEffect(()=>{
console.log('Theme change')
  }, [themeStyles])

  return (
    <>
      <input
        type="number"
        value={number}
        onChange={e => setNumber(parseInt(e.target.value))}
      />
      <button onClick={() => setDark(prevDark => !prevDark)}>
        Change Theme
      </button>
      <div style={themeStyles}>{doubleNumber}</div>
    </>
  );
}

function slowFunction(num) {
  console.log('Calling Slow Function');
  for (let i = 0; i <= 1000000000; i++) {}
  return num * 2;
}

THE FIX

const doubleNumber = useMemo(() => slowFunction(number), [number]);

Stackblitz Link
https://stackblitz.com/edit/react-use-memo-hook-end?file=src%2Fcomponents%2FCounterComponent.js

And suddenly, your app stops trying to do heavy lifting every time someone changes the theme.

Get Yuvaraj S’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now React says:

• “Did the number change?”
  → Yes? Okay, run the slow function.
• “Did anything else change?”
  → No? Cool, here’s the stored result.

It’s a small change, but the experience becomes instantly smoother.
Your app stops sweating on every render.

We also wrapped our theme styles with useMemo:

const themeStyles = useMemo(() => ({
  backgroundColor: dark ? "black" : "white",
  color: dark ? "white" : "black"
}), [dark]);

Why?

Because objects in JavaScript don’t compare by value — they compare by reference.
A brand new object appears on every render, even if it looks identical.

Memoizing it ensures that React only creates a new object when the theme actually changes.

🎯 When You Should Reach for useMemo

If React were a person, this is what it would tell you:

“Use me when you’re about to do some seriously heavy thinking.”

Here are the signals:

✔️ You have expensive, CPU-heavy calculations

Loops, sorting, filtering large arrays — perfect candidates.

✔️ You want to avoid recalculations during unrelated renders

Like our theme toggle example — a classic.

✔️ You’ve actually noticed a performance issue

This is the most important one.

🚫 When You Should Avoid useMemo (Yes, Sometimes Ignore It)

Not every problem needs memoization.

Here’s when useMemo usually does more harm than good:

❌ The calculation is tiny

Wrapping simple math or small filters with useMemo adds complexity for no gain.

❌ You’re using it “just because”

Premature optimization makes code harder to read and maintain.

❌ You think it stops re-renders

It doesn’t.
It only stops re-computation, not re-rendering.

❌ You’re memoizing values that don’t need to persist

Like constants or static objects.

🌼 Final Thoughts

useMemo isn’t about making everything faster.
It’s about making the right things faster.

It shines in situations where:

• You’re doing unnecessary heavy work
• Values don’t need to be recalculated
• You want your UI to feel smooth, not heavy

One line of code.
One tiny hook.
A meaningful performance win.

And that’s the magic of useMemo — subtle, quiet, but incredibly powerful when used at the right time.

— — — — — — — CHECK FULL BLOG SERIES — — — — — — — — —

YUVARAJ’S REACT QUICK LESSONS