Error from Flexmonster - React

Hello Nadia,
This didn't resolve the problem.
I looked at our code, and I think the reason why the initial developer (now gone) imported from `react-flexmonster/hooks` is likely that he wanted to import FlexmonsterRefefence to be used in `const flexmonsterRef = useRef<FlexmonsterReference>(null);`
After changing to main FlexmonsterReact.Pivot, FlexmonsterReference` doesn't work anymore to type the ref (I used any for now).
If you think that not importing from hooks is preferable, we'll do it anyway.

Hello again.
I may have found one of the sources of the problem, but that doesn't solve everything, and I'll explain, because I'd like to get to the bottom of it and make sure that we do things properly.
So, back to my example, the problem I found is that a key prop was added to the Pivot to explicitly force React to recreate the component.

import * as FlexmonsterReact from 'react-flexmonster';
const MyComponent: React.FC<any> = (data, config) => {
  const flexmonsterRef = useRef<any>();  // was: useRef<FlexmonsterReference>
  return <FlexmonsterReact.Pivot
      key={random()} // Important: Do not remove
      report={getReport(computeReport(data, config)}
      ref={flexmonsterRef}
    ... />
 }

 
Removing the key` seems to solve the problem, but it came with a warning and a fat comment from the initial developer (now gone):

Flexmonster is providing a React wrapper for their product. Under the hood, they use a global instance of their library. I noticed they create and dispose their instance automatically when you render the component.
There is a problem when you re-render the same component too quickly. They might kill their global instance between 2 renders and you'll end up not having access to their instance (remember all random error we had with wdr "this.q8 is undefined"...)

The solution that was implemented was to:

1. Memoize incoming props (the functional equivalent of shouldComponentUpdate` React Hooks - How do I implement shouldComponentUpdate?
2. Add a debounce before our component to avoid triggering props changes too often in Flexmonster Pivot.
3. Force reinstantiating the React component at each render => `<FlexmonsterReact.Pivot key={random} />`

If memoizing may sometimes be necessary (point 1, equivalent to shouldComponentUpdate`), debouncing starts looking like a hack, and forcing a random key definitely calls for scrutiny, as forcing a React component to be rerendered is costly, but also doesn't guarantee that the underlying non react flexmonster instance would indeed be removed / recreated as we'd like.

• Is there indeed a single "global" instance of Flexmonster behind Pivot (looking at the exposed code, I agree that it's  not clear to me)?
  • To give you more context, our application implements several pages exposing different reports/configurations and displaying various charts (calling getData()`I think). If behind the scene a single instance of Flexmonster is used, could it be that some config spilled from that global instance into our pages and somehow "corrupt" some of our reports by reporting data from a previous report?
  • Also we were initially using WebDataRocks when we started.
  • Could we have 2 distinct <Pivot> components coexisting in the same page?
• Is there indeed a risk if updating props too quickly?

So, again, I apologize if I didn't expose all our internal "cuisine", but as I mentioned above, I'd rather get to the bottom of it to ensure that our application runs smoothly without risking data corruption.

Another quick update to mention that I'm continuing the investigation on my side, as some of my previous conclusions may have been a bit too hasty. Right now, the debouncing I mentioned seems like it might be the culprit, but I will come back to you.