How to memoize messages properly when using "useChat"

[LaurinBrechter]

When I am using useChat and then rendering the messages in the ui as in the example below, all messages get rerendered whenever a single chunk is being streamed back to the client. This can be very costly when rendering the messages is expensive. Are there any examples of how to properly memoize 'old' messages? I have something working where I put past messages into a different state that doesn't get rerendered on every chunk from the response but I was wondering if anyone else was having this problem when simply rendering the messages array

'use client';

import { useChat } from 'ai/react';

export default function Page() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({});

  return (
    <>
      // rerenders on every chunk
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input name="prompt" value={input} onChange={handleInputChange} />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}