Real World Example

A dashboard header shows a clock that updates every second. Without memoization the big orders table and charts would re-render every second too.

const OrdersTable = memo(function OrdersTable({ orders }) {
  return <table>{/* 1,000 rows */}</table>;
});

function Dashboard({ orders }) {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const todayOrders = useMemo(() => orders.filter(isToday), [orders]);
  return (
    <>
      <header>{now.toLocaleTimeString()}</header>
      <OrdersTable orders={todayOrders} />   {/* skips re-render every second */}
    </>
  );
}