Fix odd state on load using React DOM batchedUpdates

.size-limit.json

@@ -2,13 +2,13 @@
   {
     "name": "Server",
     "path": "size-limit-entries/server.mjs",
-    "limit": "2.5 KB",
+    "limit": "2.6 KB",
     "ignore": ["prop-types"]
   },
   {
     "name": "Browser",
     "path": "size-limit-entries/browser.mjs",
-    "limit": "2.5 KB",
+    "limit": "2.6 KB",
     "ignore": ["prop-types"]
   }
 ]

changelog.md

@@ -7,6 +7,7 @@
 - Updated Node.js support from v8.10+ to v10+.
 - Updated dependencies, some of which require Node.js v10+.
 - Replaced the [`tap`](https://npm.im/tap) dev dependency with [`test-director`](https://npm.im/test-director) and [`hard-rejection`](https://npm.im/hard-rejection), and refactored tests accordingly. This improves the dev experience and reduced the dev install size by ~75.5 MB.
+- Use `ReactDOM.unstable_batchedUpdates` in the `useGraphQL` React hook to reduce the number of renders when loading completes, fixing [#38](https://github.com/jaydenseric/graphql-react/issues/38) via [#42](https://github.com/jaydenseric/graphql-react/pull/42). Although [`react-dom`](https://npm.im/react-dom) was already a peer dependency, this is the first time it's being used in the client API; potentially a breaking change for atypical projects.
 
 ### Patch
 

src/universal/useGraphQL.mjs

@@ -1,4 +1,5 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import { FirstRenderDateContext } from './FirstRenderDateContext.mjs'
 import { GraphQL } from './GraphQL.mjs'
 import { GraphQLContext } from './GraphQLContext.mjs'
@@ -136,10 +137,11 @@ export const useGraphQL = ({
      * @ignore
      */
     function onCache({ cacheKey: cachedCacheKey, cacheValue }) {
-      if (cacheKey === cachedCacheKey && isMountedRef.current) {
-        setLoading(false)
-        setCacheValue(cacheValue)
-      }
+      if (cacheKey === cachedCacheKey && isMountedRef.current)
+        ReactDOM.unstable_batchedUpdates(() => {
+          setLoading(false)
+          setCacheValue(cacheValue)
+        })
     }
 
     /**