animo / animo-demo

Interactive demo explaining the concepts of self-sovereign identity.
https://demo.animo.id
Apache License 2.0
29 stars 42 forks source link

chore: react 18 fixes #124

Open janrtvld opened 2 years ago

janrtvld commented 2 years ago

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 jan@animo.id

janrtvld commented 2 years ago

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

TimoGlastra commented 2 years ago

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 commented 1 year ago

@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:

TimoGlastra commented 1 year ago

Hmm what is the option you prefer/suggest?

janrtvld commented 1 year ago

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 commented 1 year ago

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.