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

Không có tệp hoặc bài kiểm thử nào được nêu tên. Hãy bắt đầu bằng cách xem lại hướng dẫn hiện có trong tài liệu React về việc lấy nội dung bên ngoài bằng useEffect, sau đó xác định cách một FAQ hoặc tài nguyên được liên kết có thể đề cập đến các cập nhật trên máy chủ như PUT và POST cùng với các cập nhật trạng thái cục bộ. Công việc được xem là hoàn tất khi tài liệu cung cấp hướng dẫn rõ ràng về các phương pháp hay nhất hoặc một tài nguyên phù hợp cho kịch bản này.