React Memo Vs useMemo Vs useCallback? See Example

React Memo vs useMemo vs useCallback

• React.memo: Wraps a component to prevent unnecessary re-renders if props are unchanged.
• useMemo: Memoizes computed values to avoid recalculating on every render.
• useCallback: Memoizes functions to prevent recreating them unnecessarily.

---

React.memo Example

import React from "react";

const Button = React.memo(({ onClick }) => {
  console.log("Button Rendered");
  return <button onClick={onClick}>Click Me</button>;
});

✅ Button re-renders only when props change.

---

useMemo Example

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

function App() {
  const [count, setCount] = useState(0);
  const expensive = useMemo(() => count * 2, [count]);

  return (
    <div>
      <h2>Expensive: {expensive}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

✅ Expensive calculation runs only when count changes.

---

useCallback Example

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

const Button = React.memo(({ onClick }) => <button onClick={onClick}>Click</button>);

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

  const increment = useCallback(() => setCount(c => c + 1), []);
  
  return <Button onClick={increment} />;
}

✅ Memoized function prevents unnecessary re-renders in memoized child.

---

Key Points

Feature	React.memo	useMemo	useCallback
Purpose	Prevent component re-render	Memoize values	Memoize functions
Use Case	Child components	Expensive calculations	Passing functions to children
Dependencies	Props	Dependency array	Dependency array

---

Conclusion

Use memo for components, useMemo for values, and useCallback for functions to optimize React performance.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP