diff --git a/.size-limit.json b/.size-limit.json index 016088e..50eabe1 100644 --- a/.size-limit.json +++ b/.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"] } ] diff --git a/changelog.md b/changelog.md index 2810fd2..1562bcb 100644 --- a/changelog.md +++ b/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 diff --git a/src/universal/useGraphQL.mjs b/src/universal/useGraphQL.mjs index 9ecf547..20402a4 100644 --- a/src/universal/useGraphQL.mjs +++ b/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) + }) } /**