React Recharts render blocking with a lot of data

Question

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

(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:

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>
  );
}

Answer 1

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