Como evitar que respostas em streaming do LLM se misturem entre mensagens no React?

Tem um problema que aparece rápido em chat com IA no frontend: você começa a renderizar tokens em streaming, manda duas mensagens em sequência e, de repente, o texto parcial do assistente começa a se fundir com a resposta errada.

No fluxo mais comum, o componente:

• adiciona a mensagem do usuário no estado
• chama um endpoint que devolve chunks
• concatena cada chunk em messages

Parece simples, mas quando a atualização fecha sobre um snapshot velho do estado, a interface perde a noção de qual resposta pertence a qual mensagem. Em produção isso costuma piorar porque concorrência, renderização assíncrona e envios rápidos expõem o bug com mais frequência.

Onde geralmente quebra

O problema raramente está no stream em si. Normalmente ele aparece em um destes pontos:

• fechamento sobre messages antigo
• ausência de um messageId estável para a resposta em andamento
• concatenação de chunks em estruturas reaproveitadas sem isolamento

O que tenho visto funcionar melhor

• criar a mensagem do assistente com ID próprio antes do primeiro chunk
• atualizar por função (setState(prev => ...)) em vez de usar snapshot antigo
• separar buffer transitório de renderização final quando o fluxo fica mais complexo

Para mim, o ponto principal é este: streaming não é só “receber texto aos poucos”; é manter identidade de mensagem sob concorrência. Sem isso, o bug parece visual, mas na prática já é de modelagem de estado.

Queria ouvir de quem já apanhou disso em React, Next ou chat interno: vocês resolvem no próprio estado da tela ou empurram esse controle para uma camada dedicada de sessão e eventos?