I'm looking to understand the best practices when updating UI and Database values simultaneously.
I have a table on the front end which is a list of items with the columns:
- Create Date
- Favorite button (star)
This list is pulled from the database via axios (similar to Ajax) when the page is loaded. The favorite button is a toggle for the user that changes the class and also updates the database. I'm trying to understand the best practices for updating the UI and the database.
Currently, the logic goes like this:
- Initial list is loaded on the page
- The user clicks the favorite button on one of the rows
- Once a successful change is made the back-end responds with 200 success code
- The front end receives the successful change and then uses axios to query the full database list to refresh the UI list with the updated data
Is this the correct method to refresh the UI? The problem I see with this method is poor UI response time if I'm waiting to both update and then again query the database while the user is making changes.
Another option I've thought about is to update the UI list while simultaneously sending the update request to the back-end. The only difference is I would not "re-query" the database to update the data since it should match.