In React what is more performant: adding items imperatively using useRef, or using state?

Imagine a chat app with infinite scroll. New messages are added to the bottom of the app when they arrive, and when the user scrolls up the app will load the last 10 messages from the database.

The classic, React-y way to do this is to use state.

const chatAppState = () => {
    const[messages, setMessages] = useState<Message[]>([]);

    // some logic happens...

    const onNewMessage = async () => {
        // happens when a user sends a new message
        const newMsgs : Message[] = await getNewMessages(...)
        setMessages(newMsgs)
    }

    const onLoadPrevMsgs() => {
        // happens when the user scrolls all the way up
        // loads the last 10 messages
        const newMsgs : Message[] = await getOldMessages(numOfDisplayedMsgs, numOfDisplayedMsgs+10)
        setMessages(newMsgs)

    }

    return(
        <div>
            messages.map(msg=><div>{msg.content}</div>)
        </div>
    )
}

However a drawback of this is that every time there is a new message, you must re-load everything displayed to the user from the database.

Another option is to useRef and imperatively add div elements:

const chatAppRef = () => {
    const chatField = useRef<HTMLDivElement>();
    const msgs = {} // ...

    const makeMsg = (msg : Message) : HTMLDivElement =>{
        // creates a new message div element
    }

    const onNewMsgs = (newMsg : Message) => {
        const msg : HTMLDivElement = makeMsg()        
        chatField.current?.appendChild(msg)
    }

    const onLoadPRevMsgs = (preMsgs : Message[]) =>{
        const newMsgs : HTMLDivElement[] = [];
        preMsgs.forEach(msg => {
            newMsgs.push(makeMsg(msg))
        })

        chatField.current?.prepend(...newMsgs)
    }

    return(
        <div ref={chatField}>
            messages.map(msg=><div>{msg.content}</div>)
        </div>
    )
}

However it is "common wisdom" that doing imperative dom manipulation is an antipattern in react. I wonder though if it is warranted here since it puts less demand on the server? Which is the more performant option?

You should keep your component stateful (that's the main benefit of React, after all!) Fortunately, there is no reason you have to reload your message list from scratch. You can combine the two approaches:

const chatAppState = () => {

  const [messages, setMessages] = useState<Message[]>([]);

  const onNewMsgs = (newMsg : Message) => {
    setMessages(messages => [...messages, newMsg]);
  }

  const onLoadPrevMsgs = (prevMsgs : Message[]) =>{
    setMessages(messages => [...prevMsgs, ...messages]);
  }

  return (
    <div>
        messages.map(msg=><div>{msg.content}</div>)
    </div>
  );
}

This minimizes the need to load messages from the server.

Note that at some point the message array might become too long to concatenate and render completely client-side. To remedy that, you could replace the Array with a deque data structure, but you would also need to improve your rendering to only render the subset of messages that are in view. That's a whole different problem however.