title: How to render a React component when its ID is known only after an AJAX call?
body: <p>I am working on a chat application which renders a chat message (a React component) as soon as the user sends it by pressing <code>Enter</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/MJXLd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MJXLd.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/S6thO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S6thO.png" alt="enter image description here"></a></p>
  
  <p>Here, after typing <code>ABC</code> and pressing <code>Enter</code>, the React component's state is updated right-away and the message is rendered in order to avoid a sluggish UI.</p>
  
  <p>Then an AJAX request is made. The AJAX sends the message to the server, which in turn, creates a new chat if <code>chat_id</code> is 0 (first message of the chat), saves the message and returns the ID of the newly created chat.
  At this point the chat is updated with the ID returned by the server. Below a snippet of the code:</p>
  
  <pre><code>class ChatApp extends React.Component {
  
      // ...
      constructor(props) {
          super(props)
          this.state = {
              currentChat: {
                  id: 0, // 0 means "this is a new chat"
                  messages: [],
                  // ...
              }
          }
      }
  
      handleSendMessage(message) {
          this.setState((prevState) =&gt; {
              const pendingCurrentChat = {
                  ...prevState.currentChat,
                  messages: prevState.currentChat.messages.concat([{
                      message
                  }])
              }
              return {
                  currentChat: pendingCurrentChat
              }
          }, () =&gt;
              this.setState((state) =&gt; {
                  const currentChat = state.currentChat
                  const currentChatId = currentChat.id
  
                  // AJAX call starts here:
                  const params = {
                      act: 'handleSendMessage',
                      message: message,
                      chat_id: currentChatId
                  }
                  this.POST(params, JSONResponseData =&gt;
                      this.setState((prevState) =&gt; {
                          const chatId = JSONResponseData.chat_id
  
                          const currentChat = {
                              ...prevState.currentChat,
                              id: chatId
                          }
                          const newState = {
                              currentChat
                          }
                          return newState
                      })
                  )
  
                  // No state change here.
                  return null
              })
          )
      }
  
      // ...
  
  }
  </code></pre>
  
  <p>The problem of this approach is that, if the chat is new (<code>currentChat.id == 0</code>), and the user sends a bunch of messages by typing and pressing <code>Enter</code> rapidly, a race condition occurs and some AJAX requests with <code>chat_id: 0</code> overlap leading to multiple chats being created server-side:</p>
  
  <p><a href="https://i.stack.imgur.com/y2lJI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2lJI.png" alt="enter image description here"></a></p>
  
  <p>Here, I have typed <code>a</code> and Enter rapidly and I ended up with more than one chat being created server side, because several requests were made with <code>chat_id</code> set to <code>0</code>.</p>
  
  <p>How can I assure that only the first message of the chat is sent to the server with <code>chat_id: 0</code> without experiencing a race condition if the user types in a fast way?</p>
  
  <p>I can only think of:</p>
  
  <ul>
  <li>Generating IDs on the client side (perhaps a UUID), which is then sent to the server. I really do not want to let the user wait until the first AJAX completes before rendering the first message;</li>
  <li>Create a new chat before letting the user to send a message. Though, this way I will consume IDs on the server even when a user might not send a first message;</li>
  </ul>
  
  <p>Facebook's Messenger for example has the behaviour I am looking for: when you send a message it is rendered as soon as you press <code>Enter</code>, how do they handle this? By looking at the network tab, it seems that they create an ID in advance, but I am not sure:</p>
  
  <p><a href="https://i.stack.imgur.com/QawDQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QawDQ.png" alt="enter image description here"></a></p>
  
  <p>How would you handle this both in terms of UI/UX and server-side data persistence?</p>