🧠 Memoization in React

Memoization helps optimize React apps by preventing unnecessary calculations or re-renders. React provides built-in tools like useMemo, useCallback, and React.memo to achieve this.

🧮 1. useMemo()

useMemo caches the result of a function. It's useful for expensive calculations.

const expensiveValue = useMemo(() => {
  return computeHeavyTask(input);
}, [input]);

🔁 2. useCallback()

useCallback memoizes a function itself, preventing it from being re-created unless dependencies change.

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

📦 3. React.memo()

Wrap components with React.memo to prevent re-renders when props haven't changed.

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

⚠️ 4. When to Use Memoization

• Heavy computation inside render
• Child components re-rendering unnecessarily
• Same function passed as prop on every render

🚫 5. Common Mistakes

• Overusing useMemo for cheap operations
• Missing or incorrect dependency arrays
• Assuming memoization always improves performance

✅ 6. Summary

• useMemo caches computed values
• useCallback caches functions
• React.memo skips re-rendering unchanged components