No FAQ on best practices on handling server updates with reactJS

The Reactjs documentation gives advice on how to fetch external content using a useEffect hook. However, it has no opinion on when or where fetch updates (put, post, etc.) should be placed.

To illustrate a motivating example, imagine the following code where setState depends on the prior state. Imagine that at some point in time, an http update request will be sent to the server with the new value.

const [XYZ, setStateXYZ] = useState(...)
...

setStateXYZ(prev => {
return prev + 1; // imagine that this logic could be much more complex, with conditionals, etc.
});

// but where should the server update go?

There are multiple places to put a server update, but most seem to have issues:

Option 1: Do the http request before setStateXYZ. Possible problem: The server update is done before the local update. Ideally, the server update would be done after the local render. In addition, we will have to compute the updated value before setStateXYZ is run, so the work to compute the new state will be done twice. The problem I see is that if XYZ is stale and updating XYZ is dependent on its prior value, there's no simple way to get the most up to date value of XYZ until after the setStatXYZ(prev => ...) call is made.

Option 2: Do the http request inside of setStateXYZ. Problem: setStateXYZ is no longer pure, which appears to be discouraged (enabling strict mode triggers updates twice to catch bugs caused by impure updates).

Option 3: Do the http request inside of an useEffect. However, the problem is that there's no obvious way to know what the actual update that needs to be persisted is, especially for complex states without diffing each object in the state (using a useRef to save the prior state). Even if you know the previous state before the update, you cannot distinguish what part of the update needs to be sent to the server.

For example, imagine that there is a "refresh" useEffect that happens every 30 seconds to refresh the UI with data from the server. The refresh will call setStateXYZ(..) to update the UI, but we don't need to persist this data to the server because it has already been persisted. We need to be able to distinguish the intention of the state update. The ideal place would be where setStateXYZ is called as in options (1) and (2). Note that the callback function argument to setState() has been deprecated, so doing a http request in the callback is no longer possible.

There appears to be ways to solve these problems, but they seem unnaturally complex.

If the FAQ can include advice/best practices, that would be great, or a link to a resource. Advice in response to this issue would also be helpful. :)

Aucun fichier ni test n’est nommé. Commencez par examiner les recommandations existantes de la documentation de React concernant la récupération de contenu externe avec useEffect, puis déterminez comment une FAQ ou une ressource liée pourrait traiter les mises à jour du serveur telles que PUT et POST parallèlement aux mises à jour de l’état local. La tâche sera considérée comme terminée lorsque la documentation fournira des recommandations claires de bonnes pratiques ou une ressource appropriée pour ce scénario.