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. :)

ファイルやテストの指定はありません。まず、useEffect を使用した外部コンテンツの取得に関する既存の React ドキュメントのガイダンスを確認し、次に、FAQ またはリンクされたリソースで、ローカル状態の更新と併せて PUT や POST などのサーバー更新をどのように扱えるかを判断します。このシナリオに対して、ドキュメントに明確なベストプラクティスのガイダンスまたは適切なリソースが示されていれば完了です。