Blog

If your app feels a little sluggish or you're seeing functions run more often than they should, memoization might be the performance boost you're looking for.

In this post, we'll break down what memoization is, why it matters, and how to use it effectively in JavaScript and React—without getting lost in theory.

🧠 What is memoization?

Memoization is an optimization technique that caches the result of a function so that if it's called again with the same arguments, the function doesn’t run again—it just returns the cached result.

This is especially useful for expensive calculations or repeated work in rendering.

Here’s a basic example in JavaScript:

function slowFunction(num) {
  console.log('Running slow function...');
  return num * 2;
}

const memoized = (() => {
  const cache = {};
  return function (num) {
    if (cache[num]) return cache[num];
    const result = slowFunction(num);
    cache[num] = result;
    return result;
  };
})();

console.log(memoized(5)); // Runs the function
console.log(memoized(5)); // Returns cached result

Memoization is all about avoiding repeated work.

🔧 Memoization in react

React apps often re-render. And sometimes, these renders re-trigger functions that don’t need to run again.

This is where memoization comes in, using built-in hooks like:

useMemo — to memoize values
useCallback — to memoize functions
React.memo — to memoize components

Let’s go over each.

✨ Usememo

useMemo helps you avoid recalculating a value unless its dependencies change.

const expensiveCalculation = (num) => {
  console.log('Calculating...');
  return num * 1000;
};

function App({ number }) {
  const result = useMemo(() => expensiveCalculation(number), [number]);
  return <p>Result: {result}</p>;
}

Without useMemo, the calculation would run on every render. With it, React only recalculates when number changes.

🔁 Usecallback

useCallback is like useMemo, but for functions.

It returns a memoized version of a function so it doesn’t get recreated unless its dependencies change.

const handleClick = useCallback(() => {
  console.log('Button clicked');
}, []);

Useful when you pass callbacks to child components that rely on reference equality to avoid re-renders.

🧱 React.memo

React.memo is a higher-order component that prevents unnecessary re-renders of functional components.

const Button = React.memo(function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
});

If the props don’t change, the component doesn’t re-render.

This is powerful when combined with useCallback and useMemo.

⚠️ When NOT to use memoization

Memoization is great, but not always necessary.

Avoid it when:

The calculation or component is already fast
Your dependencies change constantly
You’re not seeing performance issues

Premature optimization can make your code more complex without real benefits.

✅ Recap

✅ Memoization caches function results to avoid re-computation.
✅ In React, use useMemo for values, useCallback for functions, and React.memo for components.
✅ It’s most useful for expensive calculations, frequent renders, and prop-heavy components.
✅ Use it wisely—don’t memoize everything by default.

📌 Conclusions

Memoization is a simple idea that can have a big impact on your app’s performance.

If you find your functions running too often or components re-rendering unnecessarily, memoization might be the tool to help you fix it.

Just remember: it’s not about making everything fast—it’s about avoiding work that doesn’t need to happen again.

Memoization in javascript and react: why and when to use it