I’m building a React application with TypeScript that processes real-time data streams. Using useState and useEffect causes excessive re-renders, impacting performance. How can I optimize state management for frequent updates, perhaps using Context, Redux, or another library?

I’m building a React application with TypeScript that processes real-time data streams. Using useState and useEffect causes excessive re-renders, impacting performance. How can I optimize state management for frequent updates, perhaps using Context, Redux, or another library?

Here in this component whenever handleSubmit function is called it is supposed to add a new chat bubble with that message which it does but the process is kinda slow, this is a real time chat app and once a message is sent it should update the ui to render the new chat bubble instantly. This component however takes a moment (about 1-2) seconds and then renders the new chat bubble. How can I optimize this function?