query: The callback of the useQuery function causes batch state update in the development build
Describe the bug
When making a request and handle changing states inside the onSuccess callback of the useQuery function, the state changes are being batched in the development but not being batched in the production build, the correct one that I think should be the production build since the onSuccess callback isn’t a React-based event so the state changes shouldn’t be batched. That causes inconsistency between the development build and production build and led to a potential bug if the state update is working differently.
I dived deeper into the call stacks and found out that the batchNotifyFn function of the notifyManager was pointing to two different sources between the development build and production build, which might explain why the differences between 2 builds. Look at the screenshot below to see the differences.
My code snippet in case to reproduce the issue.
import { useEffect, useState } from "react";
import { useQuery } from "react-query";
const TestState = () => {
const [count, setCount] = useState(0);
const [count1, setCount1] = useState(0);
useQuery<any>(
["getDataAsync"],
() => getDataAsync("https://goweather.herokuapp.com/weather/Hochiminh"),
{
onSuccess: (data: any) => {
handleSetCount();
},
}
);
const getDataAsync = async (apiUrl: string): Promise<any> => {
const response = await fetch(apiUrl);
return response.json();
};
useEffect(() => {
console.log("count", count);
console.log("count1", count1);
}, [count, count1]);
const handleSetCount = () => {
setCount(count + 1);
setCount1(count1 + 1);
};
return (
<div>
<label>{`Current count in Project is ${count}`}</label>
<br />
</div>
);
};
export default TestState;
Expected behavior
The onSuccess callback of the useQuery function should be working consistently between the development build and production build.
Screenshots
Development build

Production build

Desktop (please complete the following information):
- OS: Windows
- Browser: Chrome/Edge
- Version: Chrome 93.0.4577.63 / Edge 93.0.961.47
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 24 (11 by maintainers)
https://github.com/tannerlinsley/react-query/pull/2703
Just checked the new version, it works like a charm !!!
Thanks guys for the awesome work @TkDodo @richardaum .
I think this looks good and the bundle sizes changes are expected and bring back the missing function. Can you create a PR please? Thank you all for your awesome work on this 🙏
@TkDodo @richardaum , I’ve read through the tree shaking clarification once again, that looks like adding index.js as a side effect will address the issue since that meets the expectation and that
doesn’t make the whole app side effect free.still makes the whole app tree-shakable.https://webpack.js.org/guides/tree-shaking/#clarifying-tree-shaking-and-sideeffects
Do you mean a bundler for the application? I’m using Vite (which is an implementation over Rollup) as bundler and the issue persists.