Selector function running old component / multiple times after a hmr update

[patel-malav]

When any code is changed and an hmr update is performed,

Select function of useQuery runs multiple times

1. new component(module) with the new state [EXPECTED BEHAVIOR]
2. old component(module) with old state [UNEXPECTED]
3. new component(module) with the new state [EXPECTED because of no. 2]

In the image -
selector executed with 1000 is the data returned from an async queryFn with 1000,
n is select function local variable
new value is from console.log in component

this issue also occurs in react native which uses webpack for hmr, and the provided link uses vite for hmr

Narrowing down from there if problem was related to hmr, I dont have the experience for that.

react rerendering does not execute select but only when the hmr is updated we find the unexpected old component

Reproducible code Demo - https://stackblitz.com/edit/vitejs-vite-9ptx7kbu?file=src%2FChild.tsx