TanStack
diff --git a/‎.github/workflows/test-and-publish.yml
Lines changed: 5 additions & 2 deletions b/‎.github/workflows/test-and-publish.yml
Lines changed: 5 additions & 2 deletions
diff --git a/‎jest.setup.js
Lines changed: 30 additions & 0 deletions b/‎jest.setup.js
Lines changed: 30 additions & 0 deletions
diff --git a/‎package.json
Lines changed: 14 additions & 7 deletions b/‎package.json
Lines changed: 14 additions & 7 deletions
diff --git a/‎rollup.config.js
Lines changed: 9 additions & 2 deletions b/‎rollup.config.js
Lines changed: 9 additions & 2 deletions
diff --git a/‎src/core/queryObserver.ts
Lines changed: 5 additions & 3 deletions b/‎src/core/queryObserver.ts
Lines changed: 5 additions & 3 deletions
diff --git a/‎src/core/subscribable.ts
Lines changed: 1 addition & 0 deletions b/‎src/core/subscribable.ts
Lines changed: 1 addition & 0 deletions
diff --git a/‎src/core/tests/queryClient.test.tsx
Lines changed: 3 additions & 3 deletions b/‎src/core/tests/queryClient.test.tsx
Lines changed: 3 additions & 3 deletions
diff --git a/‎src/core/tests/utils.test.tsx
Lines changed: 7 additions & 27 deletions b/‎src/core/tests/utils.test.tsx
Lines changed: 7 additions & 27 deletions
diff --git a/‎src/core/utils.ts
Lines changed: 2 additions & 8 deletions b/‎src/core/utils.ts
Lines changed: 2 additions & 8 deletions
@@ -13,11 +13,12 @@ on:
 
 jobs:
   test:
-    name: 'Node ${{ matrix.node }}'
+    name: 'Node ${{ matrix.node }}, React ${{ matrix.react }}'
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node: [12, 14, 16]
+        react: [17, 18]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
@@ -26,8 +27,10 @@ jobs:
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
       - run: yarn test:ci
+        env:
+          REACTJS_VERSION: ${{ matrix.react }}
       - run: yarn test:size
-        if: matrix.node == '16'
+        if: matrix.node == '16' && matrix.react == '18'
         env:
           BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
       - name: Upload coverage to Codecov
 
@@ -6,3 +6,33 @@ import { notifyManager } from './src'
 notifyManager.setNotifyFunction(fn => {
   act(fn)
 })
+
+jest.mock('react', () => {
+  const packages = {
+    18: 'react',
+    17: 'react-17',
+  }
+  const version = process.env.REACTJS_VERSION || '18'
+
+  return jest.requireActual(packages[version])
+})
+
+jest.mock('react-dom', () => {
+  const packages = {
+    18: 'react-dom',
+    17: 'react-dom-17',
+  }
+  const version = process.env.REACTJS_VERSION || '18'
+
+  return jest.requireActual(packages[version])
+})
+
+jest.mock('@testing-library/react', () => {
+  const packages = {
+    18: '@testing-library/react',
+    17: '@testing-library/react-17',
+  }
+  const version = process.env.REACTJS_VERSION || '18'
+
+  return jest.requireActual(packages[version])
+})
@@ -25,6 +25,7 @@
   "scripts": {
     "test": "is-ci \"test:ci\" \"test:dev\"",
     "test:dev": "npm run test:types && npm run test:format && npm run test:eslint && npm run test:codemod && jest --watch",
+    "test:dev:17": "npm run test:types && npm run test:format && npm run test:eslint && npm run test:codemod && REACTJS_VERSION=17 jest --watch",
     "test:ci": "npm run test:types && npm run test:format && npm run test:eslint && npm run test:codemod && jest",
     "test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
     "test:format": "yarn prettier --check",
@@ -69,11 +70,13 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.5.5",
+    "@types/use-sync-external-store": "^0.0.3",
     "broadcast-channel": "^3.4.1",
-    "match-sorter": "^6.0.2"
+    "match-sorter": "^6.0.2",
+    "use-sync-external-store": "^1.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
@@ -92,12 +95,14 @@
     "@babel/preset-typescript": "^7.16.7",
     "@rollup/plugin-replace": "^3.0.0",
     "@svgr/rollup": "^6.1.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/react-17": "npm:@testing-library/react@^12.1.4",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^10.4.7",
     "@types/jest": "^26.0.4",
     "@types/jscodeshift": "^0.11.3",
-    "@types/react": "^16.9.41",
-    "@types/react-dom": "^16.9.8",
+    "@types/node": "^16.11.10",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "babel-eslint": "^10.1.0",
@@ -122,8 +127,10 @@
     "jest": "^26.0.1",
     "jscodeshift": "^0.13.1",
     "prettier": "2.2.1",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.1",
+    "react": "^18.0.0",
+    "react-17": "npm:react@^17.0.2",
+    "react-dom": "^18.0.0",
+    "react-dom-17": "npm:react-dom@^17.0.2",
     "react-error-boundary": "^2.2.2",
     "replace": "^1.2.0",
     "rimraf": "^3.0.2",
 
@@ -44,6 +44,13 @@ const inputSrcs = [
 const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']
 const babelConfig = { extensions, runtimeHelpers: true }
 const resolveConfig = { extensions }
+const commonJsConfig = {
+  namedExports: {
+    'node_modules/use-sync-external-store/shim/index.js': [
+      'useSyncExternalStore',
+    ],
+  },
+}
 
 export default inputSrcs
   .map(([input, name, file]) => {
@@ -61,7 +68,7 @@ export default inputSrcs
         plugins: [
           resolve(resolveConfig),
           babel(babelConfig),
-          commonJS(),
+          commonJS(commonJsConfig),
           externalDeps(),
         ],
       },
@@ -83,7 +90,7 @@ export default inputSrcs
           }),
           resolve(resolveConfig),
           babel(babelConfig),
-          commonJS(),
+          commonJS(commonJsConfig),
           externalDeps(),
           terser(),
           size(),
 
@@ -570,15 +570,17 @@ export class QueryObserver<
       | QueryObserverResult<TData, TError>
       | undefined
 
-    this.currentResult = this.createResult(this.currentQuery, this.options)
+    const nextResult = this.createResult(this.currentQuery, this.options)
     this.currentResultState = this.currentQuery.state
     this.currentResultOptions = this.options
 
-    // Only notify if something has changed
-    if (shallowEqualObjects(this.currentResult, prevResult)) {
+    // Only notify and update result if something has changed
+    if (shallowEqualObjects(nextResult, prevResult)) {
       return
     }
 
+    this.currentResult = nextResult
+
     // Determine which callbacks to trigger
     const defaultNotifyOptions: NotifyOptions = { cache: true }
 
 
@@ -5,6 +5,7 @@ export class Subscribable<TListener extends Function = Listener> {
 
   constructor() {
     this.listeners = []
+    this.subscribe = this.subscribe.bind(this)
   }
 
   subscribe(listener: TListener): () => void {
 
@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import React from 'react'
 
@@ -379,7 +379,7 @@ describe('queryClient', () => {
       const rendered = renderWithClient(queryClient, <Page />)
 
       await waitFor(() => rendered.getByText('data: data'))
-      rendered.getByRole('button', { name: /setQueryData/i }).click()
+      fireEvent.click(rendered.getByRole('button', { name: /setQueryData/i }))
       await waitFor(() => rendered.getByText('data: newData'))
 
       expect(onSuccess).toHaveBeenCalledTimes(1)
@@ -409,7 +409,7 @@ describe('queryClient', () => {
       const rendered = renderWithClient(queryClient, <Page />)
 
       await waitFor(() => rendered.getByText('data: data'))
-      rendered.getByRole('button', { name: /setQueryData/i }).click()
+      fireEvent.click(rendered.getByRole('button', { name: /setQueryData/i }))
       await waitFor(() => rendered.getByText('data: newData'))
       await waitFor(() => {
         expect(rendered.getByText('dataUpdatedAt: 100')).toBeInTheDocument()
 
@@ -5,9 +5,9 @@ import {
   parseMutationArgs,
   matchMutation,
   scheduleMicrotask,
+  sleep,
 } from '../utils'
 import { Mutation } from '../mutation'
-import { waitFor } from '@testing-library/dom'
 import { createQueryClient } from '../../reactjs/tests/utils'
 
 describe('core/utils', () => {
@@ -330,33 +330,13 @@ describe('core/utils', () => {
   })
 
   describe('scheduleMicrotask', () => {
-    it('should throw an exception if the callback throw an error', async () => {
-      const error = new Error('error')
-      const callback = () => {
-        throw error
-      }
-      const errorSpy = jest.fn().mockImplementation(err => err)
-      jest.useFakeTimers()
-      const setTimeoutSpy = jest
-        .spyOn(globalThis, 'setTimeout')
-        .mockImplementation(function (handler: TimerHandler) {
-          try {
-            if (typeof handler === 'function') {
-              handler(errorSpy(error))
-            }
-          } catch (err: any) {
-            expect(err.message).toEqual('error')
-            // Do no throw an uncaught exception that cannot be tested with
-            // this jest version
-          }
-          return 0 as any
-        })
+    it('should defer execution of callback', async () => {
+      const callback = jest.fn()
+
       scheduleMicrotask(callback)
-      jest.runAllTimers()
-      await waitFor(() => expect(setTimeoutSpy).toHaveBeenCalled())
-      expect(errorSpy).toHaveBeenCalled()
-      setTimeoutSpy.mockRestore()
-      jest.useRealTimers()
+      expect(callback).not.toHaveBeenCalled()
+      await sleep(0)
+      expect(callback).toHaveBeenCalledTimes(1)
     })
   })
 })
@@ -404,14 +404,8 @@ export function sleep(timeout: number): Promise<void> {
  * Schedules a microtask.
  * This can be useful to schedule state updates after rendering.
  */
-export function scheduleMicrotask(callback: () => void): void {
-  Promise.resolve()
-    .then(callback)
-    .catch(error =>
-      setTimeout(() => {
-        throw error
-      })
-    )
+export function scheduleMicrotask(callback: () => void) {
+  sleep(0).then(callback)
 }
 
 export function getAbortController(): AbortController | undefined {
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ export class Subscribable<TListener extends Function = Listener> {`
`5`	`5`
`6`	`6`	`constructor() {`
`7`	`7`	`this.listeners = []`
	`8`	`+ this.subscribe = this.subscribe.bind(this)`
`8`	`9`	`}`
`9`	`10`
`10`	`11`	`subscribe(listener: TListener): () => void {`