How do React.memo, useMemo, and useCallback optimize component performance?

Explanation & Concept

React re-renders components whenever their parent re-renders. Performance optimization hooks prevent unnecessary calculations and re-renders:

• `React.memo`: Higher-order component that memoizes a component, skipping re-rendering if its props have not changed (shallow comparison). • `useMemo`: Caches the *result* of an expensive calculation between renders. • `useCallback`: Caches a *function reference* between renders so child components receiving it as a prop do not re-render unnecessarily.

Code Example

javascript

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

export function ProductList({ products }) {
  const [filter, setFilter] = useState("");

  // useMemo: Only re-sorts products when products array or filter changes
  const filteredProducts = useMemo(() => {
    console.log("Filtering products...");
    return products.filter((p) => p.name.toLowerCase().includes(filter.toLowerCase()));
  }, [products, filter]);

  // useCallback: Stable function reference passed to child components
  const handleSelect = useCallback((id) => {
    console.log("Selected product ID:", id);
  }, []);

  return (
    <div>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      {filteredProducts.map((p) => (
        <ProductItem key={p.id} item={p} onSelect={handleSelect} />
      ))}
    </div>
  );
}

How It Works & Key Takeaways

Without `useCallback`, `handleSelect` would be re-created with a new memory address on every render, causing memoized children to invalidate and re-render.