React Recharts render blocking with a lot of data

user_9414171 0
Viewed 2199

I have a use case for Recharts where I'm rendering more than 20,000 data points, which results in a blocking render:

See on CodeSandbox

(The CodeSandbox has a small pulse animation, so it's easier to see the blocking render when creating new chart data.)

When measuring the performance with dev tools, it is clear that the cause for this is not the browser's painting or rendering activity, but Recharts' scripting activity:

performance

By no means do I want to blame Recharts here, 20k points is a lot, but does anyone know if there's a way around the blocking render?

Things I tried:

1.) Incremental loading

Incrementally load more data (e.g. 2k + 2k + 2k + ... = 20k), which just results in more, smaller render blocking moments.

2.) Loading animation before rendering

Added a small boolean state in the rendering component to track the "mounted" status, which will at least show a loading animation when the chart component mounts, so the user is not waiting on a blank page/route switch:

const [showLoading, setShowLoading] = useState<boolean>(true);
const { isLoading, data } = useXY()   // remote data fetching
const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
  setIsMounted(true);
}, []);

useEffect(() => {
  setShowLoading(isLoading || !isMounted);
}, [isLoading, isMounted]);

...

if (showLoading) return <LoadingAnimation />

return <div>...chart...</div>

Code of the chart: (see CodeSandbox for full code)

function Chart({ data }: { data: Data }) {
  console.log("⌛ Rendering chart");

  const lineData = useMemo(() => {
    return data.lines;
  }, [data.lines]);

  const areaData = useMemo(() => {
    return data.areas;
  }, [data.areas]);

  return (
    <ComposedChart
      width={500}
      height={400}
      margin={{
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
      }}
    >
      <CartesianGrid stroke="#f5f5f5" />
      <XAxis dataKey="ts" type="number" />
      <YAxis />
      <Tooltip />
      {areaData.map((area) => (
        <Area
          // @ts-ignore
          data={area.data}
          dataKey="value"
          isAnimationActive={false}
          key={area.id}
          type="monotone"
          fill="#8884d8"
          stroke="#8884d8"
        />
      ))}
      {lineData.map((line) => (
        <Line
          data={line.data}
          dataKey="value"
          isAnimationActive={false}
          key={line.id}
          type="monotone"
          stroke="#ff7300"
        />
      ))}
    </ComposedChart>
  );
}
recharts typescript reactjs javascript performance
1 Answers

You can use (the currently experimental) React Concurrent Mode. In concurrent mode, rendering is none blocking.

export default function App() {
  // imagine data coming from an async request
  const [data, setData] = useState<Data>(() => createData());
  const [startTransition, isPending] = unstable_useTransition();
  function handleNoneBlockingClick() {
    startTransition(() => setData(createData()));
  }
  function handleBlockingClick() {
    setData(createData());
  }
  return (
    <div className="App">
      <button onClick={handleNoneBlockingClick}>
        (None blocking) Regenerate data
      </button>
      <button onClick={handleBlockingClick}>(Blocking) Regenerate data</button>
      {isPending && <div>...pending</div>}
      {data && (
        <>
          <p>
            Number of data points to render:{" "}
            {useMemo(
              () =>
                data.lines.reduce((acc, item) => {
                  return acc + item.data.length;
                }, 0),
              [data.lines]
            ) +
              useMemo(
                () =>
                  data.areas.reduce((acc, item) => {
                    return acc + item.data.length;
                  }, 0),
                [data.areas]
              )}
          </p>
          <Animation />
          <Chart data={data} />
        </>
      )}
    </div>
  );
}

In this example, I'm using the new unstable_useTransition hook, and startTransition whenever the button is clicked, for a none blocking calculation of the chart data.

The animation is not in perfect 60fps, but the site is still responsive!

See the differences in this fork of your code:

https://codesandbox.io/s/concurrent-mode-recharts-render-blocking-forked-m62kf?file=/src/App.tsx

user_60889260
Related