Boost Your React App’s Performance with Memoization

When building React applications, performance can take a hit if components re-render unnecessarily. One powerful yet often overlooked optimization technique is memoization. Understanding memoization can significantly improve your app’s performance, especially in complex applications with frequent state changes.

In this post, we’ll dive into:

• What memoization is and why it matters
• React’s memoization tools: React.memo(), useMemo(), and useCallback()
• When to use memoization (and when not to)
• Code examples to help you implement it effectively.

🔍 What is Memoization?

Memoization is an optimization technique that caches the result of a function call based on its inputs. When the same inputs are provided again, the cached result is returned instead of re-computing the logic.

Get Vicky Giram’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In React, memorization helps prevent unnecessary re-renders, which can improve performance and enhance the user experience.

⚙️ Key Memoization Tools in React

React provides three powerful tools for memoization:

1. React.memo()

• Used to memoize functional components.
• Prevents re-rendering if the component’s props haven’t changed.

🔥 Example Using React.memo()

import React, { useState } from 'react';

// Memoized Component
const MemoizedComponent = React.memo(({ count }) => {
  console.log('Memoized Component Rendered!');
  return <h2>Count: {count}</h2>;
});
function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
  return (
    <div>
      <MemoizedComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
    </div>
  );
}
export default App;

🔹 Explanation:

• The MemoizedComponent only re-renders when the count prop changes.
• Typing in the input field won’t trigger a re-render for MemoizedComponent — improving performance.

2. useMemo()

• Used to memoize computed values.
• Ideal for complex calculations or filtering large data sets.

🔥 Example Using useMemo()

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

function ExpensiveCalculation(num) {
  console.log('Calculating...');
  return num * 2; // Imagine this is a heavy computation
}
function App() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(5);
  const result = useMemo(() => ExpensiveCalculation(number), [number]);
  return (
    <div>
      <h2>Result: {result}</h2>
      <button onClick={() => setCount(count + 1)}>Increment Count ({count})</button>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(Number(e.target.value))}
      />
    </div>
  );
}
export default App;

🔹 Explanation:

• The ExpensiveCalculation function only runs when number changes — saving resources during frequent state updates.

3. useCallback()

• Used to memoize callback functions.
• Especially useful when passing functions as props to child components.

🔥 Example Using useCallback()

import React, { useState, useCallback } from 'react';

const ChildComponent = React.memo(({ handleClick }) => {
  console.log('ChildComponent Rendered!');
  return <button onClick={handleClick}>Click Me</button>;
});
function App() {
  const [count, setCount] = useState(0);
  const memoizedClickHandler = useCallback(() => {
    console.log('Button clicked!');
  }, []);
  return (
    <div>
      <ChildComponent handleClick={memoizedClickHandler} />
      <button onClick={() => setCount(count + 1)}>Increment Count ({count})</button>
    </div>
  );
}
export default App;

🔹 Explanation:

• Without useCallback(), the handleClick function would be re-created on every render, causing ChildComponent to re-render unnecessarily.
• useCallback() ensures the function reference stays the same unless dependencies change.

🚨 When to Use Memoization

✅ Use React.memo() for pure functional components that render the same output for the same props.
✅ Use useMemo() for expensive calculations that don’t need to run on every render.
✅ Use useCallback() when passing functions as props to prevent unnecessary re-creation.

❌ When Not to Use Memoization

🚫 Avoid memoizing lightweight components or computations — it can add unnecessary complexity.
🚫 Memoization is effective only when performance issues arise; don’t overuse it.

🌟 Conclusion

Memoization is a powerful technique to enhance your React app’s performance by minimizing unnecessary re-renders. By using React.memo(), useMemo(), and useCallback() effectively, you can optimize your code and deliver a smoother user experience. 🚀

💬 Have you implemented memoization in your React projects? What performance improvements did you notice? Let’s discuss in the comments! 👇