Pre loader

Problem to create chart in React application when run in dev mode

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


By following this example to create reusable SciChart component in React:

The chart cannot be created when run in dev mode. But it works well under production mode. I think it’s because React renders components twice in strict mode. It seems that SciChart got problems to create chart with the following logic when running the application in dev mode. Is this true? Or I missed anything?

 useEffect(() => {
    const chartInitializationPromise = props.initChart(rootElementId).then((initResult) => {
        sciChartSurfaceRef.current = initResult.sciChartSurface;
        return initResult.sciChartSurface;
    const performCleanup = () => {
        sciChartSurfaceRef.current = undefined;

    return () => {
        // check if chart is already initialized or wait init to finish before deleting it
        sciChartSurfaceRef.current ? performCleanup() : chartInitializationPromise.then(performCleanup);
}, []);
  • Andrew Burnett-Thompson
    Hi Quyen, will look at this on Monday. Thanks for reporting, Andrew
  • Jim Risen
    Hello. Yes, it may be due to the repeated call of the init function. Worth testing if the effect hook is called multiple times, which is not supposed to happen. Check out this example with a more complex setup. It uses the current latest React version and may resolve some of the possible issues.
  • Quyen Sy
    When running a React application with “npm run dev” in strict mode. It will do “mount-unmount-mount” on the components for testing purpose. That’s why the useEffect hook is called twice and chart initialization is done twice. However, the performCleanup() has been called when unmount. There should be no problem for the second time chart initialization. But it seems doesn’t work for me. Did you test your example with “npm run dev” in strict mode? Just want to clarify if it’s my problem. I have tried to run the demo-react-typescript example in my local, but got the “TS2305: Module ‘”scichart”‘ has no exported member ‘MemoryUsageHelper’.” error.
  • Jim Risen
    The demo-react-typescript seems to be fine on my side. But accordingly to the error, there may be an issue with the lib version. Consider reinstalling the scichart package to make sure it uses the latest. Additionally, you may need to delete the package-lock.json file.
  • Jim Risen
    Actually, there is indeed an old version specified in the lock file. We will update it. “npm install scichart@latest” should resolve the issue.
  • You must to post comments
Great Answer

The issue with React.StrictMode is that it forces the component to call the useEffect hook a second time,
but it is still using the same rootElementId. And the order of calling “create” and “delete” matters. Notice that a chart initialization is an async operation.

It is possible to add a workaround to handle this behavior.

One of the approaches is to make sure that the first init promise and the corresponding cleanup callback have been completed before the init function is called the second time.

Another one – is to make sure the init function uses a distinct rootElementId.

However, this can add a redundant complexity relevant only in strict dev mode.
We are working on more improvements for React component setup.
So I would suggest just avoiding the usage of StrictMode around the chart component meanwhile.

UPDATE: scichart-react package has been released.
It includes SciChartReact component compatible with the StrictMode + handles other common pitfalls.
We recommend using it in React projects to avoid initialization issues.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.