How can I set some state every time data changes?

[antonisprovidakis]

How can I conditionally set some state, based on data, every time it (data) changes? Kind of a side-effect. What is the best practice for this case?

onSuccess callback is not ideal since it runs only when data is actually fetched and saved in the cache.
I guess, I could use a useEffect, but I feel this is more of an anti-pattern.

For example, in this example I've prepared, if a client has a single car, then I'd like to preselect it the moment I select that client.
So no need for extra clicks by the user, etc.

cc @TkDodo

[johnlahut]

I have also been struggling with this design pattern. My current solution that I am working towards is using redux-saga in coordination with react-query. My original intent was to replace redux-saga with react-query, but I think saga has it's place. Particularly when many actions need to occur after a useQuery hook, and many of the actions are not network dependent.

This is proving to be pretty difficult because there doesn't seem to be a way to hook in to react-query which has the following conditions:

• After hook has been completed (either fetch from cache, or hard network request)
• Only fires once

I tried using both the onSettled and onSuccess callbacks. Both of these fire many times at once, and neither seem to fire when data is fetched from the cache.

My current implementation just has a scattering of useEffects on the hook's data. This pattern has it's problems, in particular:

• useEffect hook needs to be lifted high enough such that it is always part of a component on screen, otherwise all the processing will happen on render, rather than in the background.
• useEffect hook is often located in a component that doesn't depend on the data of the useQuery hook, but rather that the hook has been completed.

[TkDodo]

The problem with state syncing of any kind is the following:

• first fetch finishes, you preselect one car.
• user chooses a different car
• background refetch happens some time, and data changes. maybe a new car was added

--> the effect or callback or whatever syncs the state runs again, and overwrites the user selection.

That's bad.

This might not be an issue because you only want the pre-selection if there is only one car (and the user can't select anything else, coincidentally), but it's still generally not a good pattern.

The idea is, and I've written about this a lot already, to keep server and client state separated:

• https://tkdodo.eu/blog/practical-react-query#keep-server-and-client-state-separate
• https://tkdodo.eu/blog/react-query-and-forms#keeping-background-updates-on

I've applied the concept of deriving that final selection to your sandbox:

https://codesandbox.io/s/awesome-firefly-4msvmr?file=/src/App.js

[antonisprovidakis]

Thank you so much @TkDodo