React18 workaround

[maerten]

React 18 workaround

This PR makes react-spaces work with React18, by replacing calls to useEffect with a custom useEffectOnce (taken from https://blog.ag-grid.com/avoiding-react-18-double-mount/ )

This fixes an incompatibility issue with the changes in React v18 Strict Mode, which is causing components to be (un)mounted twice, which breaks react-spaces: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

Strict Mode and react-spaces

When a space is rendered with the new strict mode, react spaces goes through the following steps:

1. [React 18 first render/mount]
2. react-spaces: creates a space and add it to the internal spaces store
3. react-spaces: with a useEffect hook initializer, set a reference to the DOM element in space.element
4. [React 18 unmount]
5. react-spaces: useEffect clean up function: destroy the space and remove it from the store
6. [React 18 second mount]
7. react-spaces: creates a space and add it to the internal spaces store
8. react-spaces: NOT running useEffect init a second time, thereforce missing the reference to space.element

useEffectOnce works around the problem by not running the clean up function when React18 is doing this double (un)mount

[aeagle]

@maerten Many thanks for the PR. I will double check it but could I ask why you are committing the dist folder as part of the changes?

[maerten]

Hi @aeagle, i added those just so i could add this fork as an npm dependency in a project. If you’re interested in merging this, feel free to remove that commit from this branch!

[aeagle]

Hi @maerten. Sure. Understand why you did it for that purpose but I'd like to keep build files out of the repo. I've moved the useEffect fix in isolation to PR #120 with other React 18 related updates. Ideally could you move your SASS fix to a separate PR? I'd like to test that in isolation.

[maerten]

Yep got it, thanks for merging the proposed fix!

It’s fine leave out the sass stuff if node-sass works for you, Im not sure how to test it. The issue with node-sass for me was that it requires python2 to install/build and I could not get it to work on my machine.