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

const ProductList = ({ products }) => {
  const [search, setSearch] = useState('');

  // Expensive filtering operation
  const filteredProducts = useMemo(() => {
    console.log('Filtering products...');
    return products.filter(product =>
      product.name.toLowerCase().includes(search.toLowerCase())
    );
  }, [search, products]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search products"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <ul>
        {filteredProducts.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

When to use useMemo:

• Prevents filtering the list every render unless search or products change.

• Speeds up rendering when working with large datasets.

useCallback – Memoizing Functions

Prevent passing new function instances to child components unless dependencies change.

Example: Avoid unnecessary Re-renders in Child Components

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

const Button = React.memo(({ onClick, label }) => {
  console.log(`Rendering button: ${label}`);
  return <button onClick={onClick}>{label}</button>;
});

const Counter = () => {
  const [count, setCount] = useState(0);
  const [other, setOther] = useState(0);

  // Memoize increment function
  const increment = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={increment} label="Increment" />
      <button onClick={() => setOther(prev => prev + 1)}>Update Other State</button>
    </div>
  );
};

When to use useCallback:

• Without useCallback, the increment function would be re-created on every render.

• React.memo would see a new prop function each time, causing unnecessary re-renders of Button.