Javascript Programming Tutorials, Guides & Best Practices

For components that perform heavy computations, useMemo can cache the result of a calculation, recomputing it only when its dependencies change.([Content That Scales][5])

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

function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    // Expensive computation
    return data.map(item => /* processing */ item);
  }, [data]);

  return <div>{/* render processedData */}</div>;
}

Memoization is a technique used to optimize performance by caching the results of expensive function calls and reusing the cached result when the same inputs occur again.

React.memo is a higher-order component that prevents a functional component from re-rendering unless its props change.