Fix odd state on load using React DOM batchedUpdates

[Grsmto]

Hey!

This fixes https://github.com/jaydenseric/graphql-react/issues/38 .

I spent some time investigating this and I figured out, as you suggested it, that it was the two consequent calls to setState that were not being batched by React. These 2 setState are triggering 2 separate renders, creating an odd state.

This is a known "issue" in React, see https://github.com/facebook/react/issues/17048

The workaround is to use the ReactDOM.unstable_batchedUpdates function that forces updates to be batched.

There are numbers of scenarios where this is needed, like to a 404 page or a "no result" state on a search feature.

Another solution would be to use useReducer instead of multiple setState to do multiple state changes in a single render.

One cons of this solution is that this relies on a React-DOM API which makes the code unusable in a React-Native environment.

Let me know what you think, thanks!

[jaydenseric]

Good job looking into it 🙌

I found a great article on the topic:

https://blog.logrocket.com/simplifying-state-management-in-react-apps-with-batched-updates

This issue will go away in React 17, but for now unstable_batchedUpdates seems an acceptable solution. Are there any other locations in the code that would benefit from using it?

React Native is not documented as supported, but any React Native graphql-react users please pipe up and we can look at catering for it.

I'll probably consider this for a bit, and maybe take a stab at a useReducer refactor first and see which approach is better. If you’re keen to speed things up, feel free to have a go at useReducer yourself :)

[jaydenseric]

Thanks @Grsmto 🙌