Three approaches I would suggest. (The problem isn't really tied to ReactJS)

1. Reactive Approach

• Let the buy button buy and update the record accordingly in the backend denoting that it is sold.
• Any succeeding requests for that backend will result in an error.
• Up to you how you will do the UX, but usually a pop up saying the item is now sold out is enough. (This is when you can remove the said item from the view.)
• This is far the easiest to implement in my opinion.
• This is a classic solution to a race problem.

2. Real Time Approach

• there are many solutions you can use to do this. I won't deep dive on what solutions you can use. But basically, you need to find a way to have an open connection between your data source and frontend enabling real time subscription (like Facebook notifications or messaging)
• One solution is to use sockets as one of the comment dictates. Basically, when a request to the backend was made, there should be an event that would trigger a push to all subscribed frontends that this item was bought. (You can then do the necessary frontend UX after receiving such event.)
• You will still need to do the reactive solution just in case.
• This is hard to implement since your number one problem is to support scale and possibly an event driven architecture.

3. Near Real Time Approach

• Not really elegant, but you can just poll for changes in the backend in the background and when something was updated you can do the necessary UX.
• Still need to do the reactive solution.
• Be careful though on the interval though, it might mimic a DDoS attack but nothing a cache can't solve if it's just pure GET requests.