React - update remote data, update the view - reactjs

Question

Let's say I fetch some data. Then, I make some modifications to the data - for example, I click 'delete' on a single record, and an appropriate request is made to update the remote database.
Now, what's the most popular way to keep local state (the view) synchronized? Should I just delete the record from the local state, and hope the DB indeed got updated and everything's in sync? Or perhaps I should instantly make yet another request and fetch the entirety of the updated data and populate the view?

Answer 1

What i suggest is that you assign the original state to a variable and then you make the call to the database and update the state by deleting the entry and then you check the response from the db if it is ok so you keep the new state, if not you re-set the state with the original that you stored on the variable and show an error message, this is a basic example using axios
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import { notification } from 'antd';
export default const myCommponent = () => {
const [items, setItems] = useState([])
const [fetchingData, setFetchingData] = useState(true)
// make the call to the db to get the items
useEffect(() => {
// here you create the function that will fetch the data from the api once the component is mounted
async function geData() {
await axios({
url: 'your_url',
method: 'GET'
}).then((response) => {
setItems(response.data)
setFetchingData(false)
});
});
}
if (fetchData) {
// if the fetchingData is true so you send the request this to prevent your component from changing the state multiple times
geData();
}
}, []);
const handleDelete = (e) => {
// here you imutate the state
const originalList = [ ...items ];
// you delete the item from the imutated state
const newList = originalList.filter((item) => {
return item.key !== e.key;
});
// you set the new state
setItems(newList);
// you send your request to the api to delete the desired item
axios({
url: `delete url/`,
method: 'DELETE'
}).then((response) => {
// you check the response sent from the api
if (response.data.status_code === 200) {
// if it OK so you just have to show a confirmation message
notification['success']({
message: response.data.message
});
} else {
// if not yuou show an error message
notification['error']({
message: response.data.message
});
// you reset the state to the original with the deleted item.
setItems(originalList);
}
});
};
render(){
return(
<div>
// return the component here
</div>
);
}
}
I hope that will give you the desired result.

Answer 2

There are a few ways this can be done.
Sync
Make the network call to delete the item
Wait for its reponse
Show a loading/wait state meanwhile
Once you have received the response, update the view accordingly i.e. if it's an error, tell the user that
Async
Make the network call to delete the item
Update the view as soon as the network call is made but save the initial values
Once you receive the response if there is an error, you need to add back that item to your view
If it's a success, you need to do nothing
The advantage of 2 is that you provide the feedback to the user immediately and it gives the impression that your app is fast no matter how slow their internet is. You are handling everything in the background. I believe it can be bad for sensitive things that you NEED to be updated and the user may not see or get back to those places once they have done an action there.
So, doing stuff like simply archiving a conversation can be handled by 2nd method.
Doing stuff like blocking a user should be handled by 1st method because it can be sensitive to the user. If you do handle it by 2nd you need to convey it clearly to the user that the action has failed if it fails.