Create-react-app + SciChart unexpected behavior with effects

[Nipatsku]

Hi, I tried modifying the JS.Examples demo-create-react-app-scicharts application, by moving the test data behind an state that is changed by an interval.

On recently updated Google Chrome I get WebGL errors in console

WebGL: INVALID_VALUE: texImage2D: width or height out of range

And eventually crash

index.js:1 RangeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Out of memory at ImageData creation

I suppose there is a memory leak when the data changes. I have tried my best to properly dispose the chart and all components in the useEffect cleanup function, but to no avail. I found no SciChart examples of React applications that place the chart behind any state or prop, and I'd like to know if this is at all possible now or in the future.

I am attaching just the modified App.js file from SciChart example create-react-app-scicharts (renamed to .txt file)

App.txt

[observerjnr]

Hello,

You may want to check this thread https://github.com/ABTSoftware/SciChart.JS.Examples/issues/57

Also I was able to fix the snippet by handling the data update logic separately from instantiation.

 useEffect(() => {
    if(!sciChartSurface || !dataSeriesRef.current) {
      return;
    }

    const xValues = data.map(xy => xy.x)
    const yValues = data.map(xy => xy.y)

    dataSeriesRef.current.appendRange(xValues, yValues);
  }, [data])

The full solution attached. App.txt

[Nipatsku]

@observerjnr Thanks! With your help and the linked thread I was able to get this test working.

[Nipatsku]

Linking final solution

App.txt