I want to refetch the data after save is succeeded.

here is the demo that demonstrates the issue -

=/src/index.js

Issue here is useEffect not gets triggered after data changes. So the log from line 111 never happens...

Is this behaviour expected?? If not What am I doing wrong??

Also If this behaviour is expected then how to get the latest data programmatically?

I want to refetch the data after save is succeeded.

here is the demo that demonstrates the issue -

https://codesandbox.io/s/romantic-orla-h9scuc?file=/src/index.js

Issue here is useEffect not gets triggered after data changes. So the log from line 111 never happens...

Is this behaviour expected?? If not What am I doing wrong??

Also If this behaviour is expected then how to get the latest data programmatically?

• javascript
• reactjs
• react-hooks
• react-query

• I'm not familiar with react-query but my guess is that useEffect isn't called because data doesn't actually change. You refetch, but the result didn't change, so nothing needs to change. – Halcyon Commented Sep 5, 2022 at 13:19
• @JatinParmar, Is it expected behaviour? Is it meant to updated in background only?? – shubham Commented Sep 5, 2022 at 13:22
• i have checked and code inside useEffect get executed finely – Jatin Parmar Commented Sep 5, 2022 at 13:48
• inside the codesandbox open the console and click on refetch button you will see console.log will updated – Jatin Parmar Commented Sep 5, 2022 at 13:51
• After clicking on refetch data button?? Are you sure? – shubham Commented Sep 5, 2022 at 13:51

3 Answers 3

I don't know much about React-Query but in RTK Query after using refetch, for this kind of behavior, you should pass isFetching to useEffect. This works like a charm and useEffect runs again when refetching is done.

That happens because you already re-fetch the same data with the same reference because react-query gets it from the cache, So according to useEffect the data doesn't change at all, and will not re-execute.

So, That's the expected behavior.

React Query uses structural sharing out of the box.

Please refer below links for more details:

https://tkdodo.eu/blog/react-query-render-optimizations#structural-sharing https://tanstack./query/v4/docs/react/reference/useQuery