Performance Optimization

Isolate components

If you have a chart with many components, and only a few of them change frequently, consider isolating those components into their own function. This way, only the isolated components will re-render when their state changes, while the rest of the chart remains static.

This chart can potentially be slow

This chart is more performant

You may also want to consider using React.memo to memoize components, so that they only re-render when their props change.

Keep references stable

If you are passing objects or functions as props to Recharts components, consider using React's useMemo and/or useCallback hooks to memoize them. This can help prevent unnecessary re-renders of Recharts components when their props haven't actually changed.

This is especially important for functions, and especially for dataKey prop. dataKey can be a function, and change in dataKey means that recharts has to recalculate all the points for that component. Keeping dataKey stable with useCallback can help improve performance.

This chart can be slow because dataKey function is re-created on each render

This chart is more performant because dataKey function reference is stable between renders

eslint-plugin-react-perf

To help keeping stable references, consider using the eslint-plugin-react-perf ESLint plugin, which will help identify places where you might be creating new references unnecessarily.

Recommended configuration

Keep it simple

Does your chart truly need to display all 50,000 data points? Are your users going to understand what is going on and are they going to appreciate that level of detail?

Perhaps a simpler chart with fewer data points, or even a summary statistic, would be more effective and easier to understand. Consider using data aggregation or sampling techniques to reduce the amount of data being rendered.

An example would be binning the data using d3.bin.

Consider displaying metadata instead of the whole data array. Show a histogram, or a cumulative distribution instead.

Wait a little

Mouse events can fire very frequently, and if your chart updates on every mouse event, it can become sluggish. One can go to very great lengths to optimize, but sometimes a simpler solution is to just wait a little, add debounce and only redraw the chart after the user has stopped moving the mouse for a short period of time.

Example of debounced mouse handler

Measure, measure, measure!

During optimizing, use one of the many tools available to assist. They will tell you exactly which component is rendering. My favourites are, in this order:

1. React devtools profiler
2. Browser devtools flame charts (Firefox, Chrome)

Let us know

If you have tried all of the above and are still experiencing performance issues, please open an issue on GitHuband we will try to help. Sometimes it will still be Recharts' fault, and we are always looking for ways to improve performance.