chore: react 18 fixes

[janrtvld]

React 18 has some new strict mode functionalities that made components rerender. I think its explained under React v18 unmounting and remounting architecture in this post and this stackoverflow question.

What happens is components are loaded twice, which in our case made tests fail as it made 2 api calls for creating an invitation, while the first one is intercepted but overwritten by the second one (which the application uses).

I think this is the issue, because when i remove the StrictMode everything works fine.

Signed-off-by: Jan [email protected]

[janrtvld]

I will try to find a fix as removing StrictMode might result into other issues.

[TimoGlastra]

Yes have seen a lot of issues with this. There's some guidance in the new docs on this: https://beta.reactjs.org/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development

[Tommylans]

@janrtvld @TimoGlastra

I think it's really hard to prevent this. It also has to do with how we made the app we want things to happen when you enter a specific page. Everything is also dependent on each other and some things can only happen once. This is quite rare in web applications because normally in most business applications almost everything is just fetching information and executing a action based on a button click.

So the possible options that we have are:

• Disabling react strict mode
• Only using the cypress tests in React production mode.
• Adding a lot of workarounds in the app to prevent a double execution of a useEffect. (https://beta.reactjs.org/learn/synchronizing-with-effects#fetching-data)

[TimoGlastra]

Hmm what is the option you prefer/suggest?

[janrtvld]

Only using it in the test will only solve halve of the problem, because that would still result in issues when your developing.

My preference would be to refactor the useEffects to the new React 18 way. The solution itself is pretty straightforward, it's just a tedious job.

[Tommylans]

Yeah with strictmode you will get all the proof and issued credentials twice... So I think then updating all the useEffects that will create something or changes a mandatory state will need a refactor.