[Bug] issue with React StrictMode causing Dataset table to not display

[Ritesh9876]

Describe the bug When clicking the "View Data Table" button in a React or Next.js application while using Strict Mode, the dataset table is not visible. This issue occurs because this.setState is set to an empty function in the componentDidUnmount lifecycle method.

In Strict Mode, componentDidUnmount is called at the start (detect potential issues), which causes this.setState to be set as an empty function prematurely. As a result, any subsequent calls to setState do not change the state of the component.

The issue has been fixed by introducing a hasMounted flag to ensure that setState is only called when the component is mounted.

A similar issue occurs when the data table is visible, and the three vertical dots near each column are clicked. In Strict Mode, the dropdown menu does not appear.

To Reproduce Steps to reproduce the behavior:

1. Go to examples/demo-app/src/main.js or create a new React/Next.js application.
2. Wrap the component in React.StrictMode.
3. Open the application in the browser, upload a dataset, and click the "View Data Table" button.
4. Observe that the dataset table is blank.

I have raised PR for this issue: https://github.com/keplergl/kepler.gl/pull/2683

Screenshots

Expected behavior The dataset table should be visible, and the dropdown near each column name should be functional in Strict Mode.

Desktop :

OS: Ubuntu Browser: Chrome, firefox Version: Ubuntu 24.04.1 LTS

[Ritesh9876]

Hi, @ibgreen @igorDykhta I would really appreciate your help with this issue. I have described the problem and the steps to reproduce it

[igorDykhta]

@Ritesh9876 you fix has landed