refactor(reactBatchedUpdates): remove the side effect that sets batchNotifyFn in react (#4699)

* refactor(reactBatchedUpdates): remove the side effect that sets unstable_batchedUpdates as batchNotifyFn in react and react-native

* docs(v5 migration guide): explain unstable_batchedUpdates removal

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: RodSarhan

docs/react/guides/migrating-to-react-query-5.md

@@ -161,3 +161,18 @@ useQuery<number, string>({
 ### eslint `prefer-query-object-syntax` rule is removed
 
 Since the only supported syntax now is the object syntax, this rule is no longer needed
+
+### No longer using `unstable_batchedUpdates` as the batching function in React and React Native
+
+Since the function `unstable_batchedUpdates` is noop in React 18, it will no longer be automatically set as the batching function in `react-query`.
+
+If your framework supports a custom batching function, you can let TanStack Query know about it by calling `notifyManager.setBatchNotifyFunction`.
+
+For example, this is how the batch function is set in `solid-query`:
+
+```ts
+import { notifyManager } from '@tanstack/query-core' 
+import { batch } from 'solid-js' 
+  
+notifyManager.setBatchNotifyFunction(batch) 
+```

packages/react-query/package.json

@@ -21,9 +21,7 @@
     },
     "./package.json": "./package.json"
   },
-  "sideEffects": [
-    "./src/setBatchUpdatesFn.ts"
-  ],
+  "sideEffects": false,
   "scripts": {
     "clean": "rm -rf ./build",
     "test:codemods": "../../node_modules/.bin/jest --config codemods/jest.config.js",

packages/react-query/src/index.ts

@@ -1,8 +1,5 @@
 /* istanbul ignore file */
 
-// Side effects
-import './setBatchUpdatesFn'
-
 // Re-export core
 export * from '@tanstack/query-core'
 

packages/react-query/src/reactBatchedUpdates.native.ts

@@ -91,7 +91,6 @@ export default function rollup(options: RollupOptions): RollupOptions[] {
       outputFile: 'index',
       entryFile: [
         'src/index.ts',
-        'src/reactBatchedUpdates.native.ts',
       ],
       globals: {
         react: 'React',
@@ -360,8 +359,6 @@ function cjs({
       replace({
         // TODO: figure out a better way to produce extensionless cjs imports
         "require('./logger.js')": "require('./logger')",
-        "require('./reactBatchedUpdates.js')":
-          "require('./reactBatchedUpdates')",
         preventAssignment: true,
         delimiters: ['', ''],
       }),