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

未指定檔案或測試。首先查看現有 React 文件中關於使用 useEffect 擷取外部內容的指引，然後確定 FAQ 或連結資源如何處理 PUT 和 POST 等伺服器更新，以及本機狀態更新。完成標準是文件為此情境提供清楚的最佳實務指引或適當的資源。