Seeking to optimize the process of updating UI and database values at the same time.
The Scenario
Currently, there is a table displaying items with columns like ID, Name, Create Date, and Favorite button on the front end. This data is fetched from the database using axios during page load. The favorite button allows users to toggle between different states, changing the class on the UI and updating the corresponding database value. I am exploring the best practices for handling these updates efficiently.
The current approach involves:
- Loading the initial list when the page loads
- User clicks on the favorite button for an item
- UI JavaScript sends an update request to the database to modify the "favorite" value for that specific item
- Upon successful update, the backend responds with a 200 status code
- Frontend then fetches the updated data from the database using axios to refresh the UI list
Question: Is this the most effective way to update the UI? One concern is the delay in response time as it involves updating and querying the database simultaneously while the user makes changes.
Exploring Alternatives
An alternative approach could be to update the UI list in real-time while sending the update request to the backend concurrently. In this case, there would be no need to re-query the database since the UI data should already reflect the changes made.