javascript - React Recharts render blocking with a lot of data - Stack Overflow

admin管理员组

文章数量:1415673

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 ponent to track the "mounted" status, which will at least show a loading animation when the chart ponent 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>
  );
}

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 ponent to track the "mounted" status, which will at least show a loading animation when the chart ponent 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>
  );
}

• javascript
• reactjs
• typescript
• performance
• recharts

Share Improve this question Follow edited Mar 22, 2021 at 13:09 Bennett Dams asked Feb 23, 2021 at 11:54 Bennett DamsBennett Dams 7,06366 gold badges2929 silver badges4848 bronze badges 1

• hi, i'm currently in a similar situation as you where i have to plot a dataset with ~4000+ values, how did you go about implementing the loading spinner until the chart has pletely rendered all the datapoints? i'm not sure how to hooking into the lifecycle states of these Rechart ponents – munjyong Commented Nov 20, 2022 at 14:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4 +25

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

export default function App() {
  // imagine data ing 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

本文标签： javascriptReact Recharts render blocking with a lot of dataStack Overflow