In a React app for work, I need to implement a favorites feature for card items. Our data comes from a Portal with its own UI and favoriting capability, but the API doesn’t include an isFavorite property. To determine favorites, I make a secondary call to retrieve favorited item IDs and cross-check them with our item list on app load.
When I toggle the favorite status on an item, it works as I can see the change in the Portal. However, the issue is that when I immediately requery the favorited IDs to update the UI, the API returns the old list. The favorite status isn’t reflected immediately. Using a setTimeout helps, but it takes a few seconds to get the correct list, making it unreliable. I have tried somewhat of an optimistic update from scratch but that still does not relief the old state of favorites coming back from the API
How can I ensure immediate and reliable UI updates for the favorite status of items in a React app when the API’s response is delayed?