Optimizing Re-renders with useMemo for Large Datasets

Provide an example of using the useMemo hook to optimize the performance of charts handling large datasets, avoiding unnecessary re-renders.

import React, { useMemo } from 'react';
import { Chart } from 'react-charts';

function MyChart({ data }) {
  const memoizedData = useMemo(() => data, [data]);
  // useMemo is used here to ensure that the data doesn't cause a re-render unless it actually changes

  const series = useMemo(
    () => ({
      type: 'bar'
    }),
    [] // dependencies array is empty as the series type won't change over time
  );

  const axes = useMemo(
    () => ([
      { primary: true, type: 'ordinal', position: 'bottom' },
      { type: 'linear', position: 'left' }
    ]),
    [] // dependencies array is empty as the axes configuration won't change
  );

  return (
    <div style={{ width: '400px', height: '300px' }}>
      <Chart data={memoizedData} series={series} axes={axes} tooltip />
    </div>
  );
}

This code creates a bar chart using the useMemo hook to optimize performance for large datasets. By memoizing the data, series, and axes configurations, we ensure the chart only re-renders when the data changes and not on every component update. This is particularly useful for improving performance in applications with large datasets or complex visualizations.