Tres enfoques que sugeriría. (El problema no está realmente relacionado con ReactJS)

1. Enfoque reactivo

• Deje que el botón de compra compre y actualice el registro en consecuencia en el backend indicando que está vendido.
• Cualquier solicitud posterior para ese backend dará como resultado un error.
• Depende de usted cómo hará la UX, pero generalmente una ventana emergente que dice que el artículo ya está agotado es suficiente. (Aquí es cuando puede eliminar dicho elemento de la vista).
• Este es el más fácil de implementar en mi opinión.
• Esta es una solución clásica a un problema de raza.

2. Enfoque en tiempo real

• hay muchas soluciones que puede utilizar para hacer esto. No profundizaré en las soluciones que puede usar. Pero básicamente, debe encontrar una manera de tener una conexión abierta entre su fuente de datos y la interfaz que permita la suscripción en tiempo real (como notificaciones o mensajes de Facebook)
• Una solución es usar sockets como dicta uno de los comentarios. Básicamente, cuando se realiza una solicitud al backend, debe haber un evento que active un impulso para todos los frontends suscritos de que se compró este artículo. (Luego puede hacer la interfaz de usuario necesaria después de recibir dicho evento).
• Aún tendrá que hacer la solución reactiva por si acaso.
• Esto es difícil de implementar ya que su problema número uno es admitir la escala y posiblemente una arquitectura basada en eventos.

3. Enfoque en tiempo casi real

• No es realmente elegante, pero puede sondear los cambios en el backend en segundo plano y cuando se actualizó algo, puede hacer la UX necesaria.
• Todavía falta hacer la solución reactiva.
• Sin embargo, tenga cuidado en el intervalo, ya que podría imitar un ataque DDoS, pero nada que un caché no pueda resolver si se trata solo de solicitudes GET puras.