Events fail to initialize on `react@^18`

[nickofthyme]

When using charts with react@^18, the event callbacks for user interactions all fail to be called.

With React18 that seriously blocks us: event callbacks like onBrushEnd are not called in React18.

Originally posted by @yannbolliger in https://github.com/elastic/elastic-charts/issues/1910#issuecomment-1715683028

This issue appears to be related to the ResizeObserver calling onResize with an empty element (i.e. { height: 0, width: 0 }). Then the UPDATE_PARENT_DIMENSION is updating to the zeroed dimensions and blocking the initialization of the event callbacks.

See codesandbox example here

Notice not console logs of the events.

[nickofthyme]

@markov00 I took a look into this and for some reason the redux state does not appear to be updating the parent dimensions. The UPDATE_PARENT_DIMENSION reducer is called with a non-zero height and width but then immediately after the getInternalIsInitializedSelector returns a non-initialized state with height = width = 0.

When you get a chance could you take a look, cuz I'm out of ideas on what it could be.

[markov00]

@markov00 I took a look into this and for some reason the redux state does not appear to be updating the parent dimensions. The UPDATE_PARENT_DIMENSION reducer is called with a non-zero height and width but then immediately after the getInternalIsInitializedSelector returns a non-initialized state with height = width = 0.

When you get a chance could you take a look, cuz I'm out of ideas on what it could be.

I did but not fully sure about my findings (I need to dig a bit more):

• it seems related to the way we dispatch the call: we update from within a RAF
• it could be also related to the debounce function used: react 18 put some changes to how setTimeout works, not sure if this is related but we should check

[nickofthyme]

This issue appears to be caused by using the StrictMode component from react. Still investigating but likely due to these changes.

See same demo as above with StrictMode removed.

[nickofthyme]

Since kibana does not use StrictMode I am pushing this fix to 8.16 cycle to be done along with work to upgrade redux https://github.com/elastic/elastic-charts/issues/2377.

[jonas080301]

Hi there, i am using elastic/charts 65.2.0 with Next13 and React18 and have the same error with onElementClick event. Is there any workaround or fix?

[nickofthyme]

@jonas080301 are you using StrictMode?

[jonas080301]

@jonas080301 are you using StrictMode?

Looks like NextJS uses React in Strict Mode. I got it to work by setting reactStrictMode to false in the next.config.ts! Thank you

[nickofthyme]

Glad to hear! I plan to dig deeper into the issue soon but for now that is the best workaround.