By following this example to create reusable SciChart component in React:
https://www.scichart.com/documentation/js/current/TutorialReusableReactComponent.html
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.delete();
sciChartSurfaceRef.current = undefined;
};
return () => {
// check if chart is already initialized or wait init to finish before deleting it
sciChartSurfaceRef.current ? performCleanup() : chartInitializationPromise.then(performCleanup);
};
}, []);
- Quyen Sy asked 1 year ago
Hi Quyen, will look at this on Monday. Thanks for reporting, Andrew
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. https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-react-typescript It uses the current latest React version and may resolve some of the possible issues.
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.- 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.
- 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 login to post comments
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.
- Jim Risen answered 12 months ago
- last edited 7 months ago
- You must login to post comments
Please login first to submit.
