useMemo vs useCallback : When you start working with React, you often hear about useMemo() and useCallback(). At first, they may seem confusing because both are used to optimize performance. I remember when I was learning React, I kept mixing them up. If you’ve been there too, don’t worry — in this guide, I’ll explain their differences in simple words, so you’ll never forget them again.

Why Performance Optimization Matters in React

React re-renders components whenever their state or props change. While this is good for keeping the UI updated,
it can sometimes slow down your app if there’s heavy computation or unnecessary re-renders.

That’s where useMemo and useCallback come to the rescue.
They help skip unnecessary calculations and
prevent components from re-rendering when it’s not needed.

What is useMemo() in React?

The useMemo() hook is used to memoize the
result of a function. This means React will
store the computed value and only re-run the function if the dependencies change.

Simple Example of useMemo:

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

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const expensiveCalculation = useMemo(() => {
    console.log("Calculating...");
    return count * 2;
  }, [count]);

  return (
    <div>
      <h1>Result: {expensiveCalculation}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}
    

How it works:

• The expensive calculation only runs when count changes.
• Changing the text will not trigger the calculation, saving performance.

What is useCallback() in React?

The useCallback() hook is used to memoize a function itself,
not its result. This is useful when passing functions as props to child components because it prevents them from
unnecessary re-rendering.

Simple Example of useCallback:

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

function Button({ onClick }) {
  console.log("Button rendered!");
  return <button onClick={onClick}>Click Me</button>;
}

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <Button onClick={handleClick} />
    </div>
  );
}
    

How it works:

• The handleClick function stays the same between renders.
• The <Button /> component will not re-render unless required, improving performance.

Key Differences Between useMemo and useCallback

When to Use useMemo and useCallback

• Use useMemo(): When you have a heavy calculation or
  derived data that should not re-run unnecessarily.
• Use useCallback(): When you pass functions as
  props to child components, especially if those children are wrapped in React.memo().

Best Practices

• Don’t overuse these hooks – unnecessary usage can make code harder to read.
• Use them only for performance bottlenecks.
• Always provide correct dependency arrays, or you might run into bugs.

Final Thoughts

When I first started using React, I would randomly add useMemo and useCallback everywhere,
thinking they would magically speed up my app. Over time, I learned that
understanding the problem first is the key.

– If you need to cache a value, use useMemo().
– If you need to cache a function, use useCallback().

Both are powerful tools for improving React app performance, but only when used wisely.

The post useMemo vs useCallback in React: Simple Explanation with Examples appeared first on Azad Chouhan.