Optimizing Chart Rendering with useCallback

Illustrate the use of React's useCallback hook to optimize the rendering of a chart component that requires expensive calculations or functions.

const expensiveChartCalculation = useCallback((data) => {
  // Imagine this function performs heavy calculations
  return data.map(item => item * 2);
}, []);

Defines a memoized callback using useCallback. This ensures that 'expensiveChartCalculation' is not re-created on every render unless its dependencies change, which are none in this case (hence the empty dependency array). It represents a hypothetical expensive calculation needed for the chart.

const ChartComponent = React.memo(({ data }) => {
  const processedData = expensiveChartCalculation(data);
  return (
    <div>
      {/* Render chart using processedData */}
    </div>
  );
});

Defines a memoized chart component that uses the memoized 'expensiveChartCalculation' function to process chart data. The use of React.memo ensures the component only re-renders when its props change, further optimizing performance.