✅ Function → A function that performs the computation.

Dependencies → Variables that trigger recalculation if they change.

memoizedValue → The result of the memoized computation.

---

📌 1. Basic Example of useMemo

jsx
import React, { useState, useMemo } from 'react';const FactorialCalculator = () => {  const [number, setNumber] = useState(5);  const [counter, setCounter] = useState(0);  // Memoized factorial calculation  const factorial = useMemo(() => {    console.log('Calculating factorial...');    const calculateFactorial = (num) => {      if (num <= 1) return 1;      return num * calculateFactorial(num - 1);    };    return calculateFactorial(number);  }, [number]);  return (    <div>      item => item.<div>      <div>      <h1>Objects are {isEqual ? 'Equal' : 'Not Equal'}</h1>    </div>  );};export default CompareObjects;

🛠 Explanation:

• useMemo ensures the areEqual function is not re-executed unnecessarily.

• Helpful in comparing complex objects.

📌 4. When to Use useMemo

✅ Use useMemo when:

• You have expensive computations.

• You are filtering or sorting large data.

• You are dealing with performance bottlenecks.

❗ Avoid useMemo when:

• Computations are simple or fast.

• There’s no noticeable performance issue.

• It adds complexity without benefits.

📌 5. Conclusion

• useMemo is a powerful optimization tool.

• It helps in performance-intensive applications.

• Combine with useCallback if you need to memoize functions.