React 19 useOptimistic钩子导致消息数组全量重渲染问题求助

问题背景 #

我在试用React 19 RC版本新特性开发实时聊天应用，结合useActionState与useOptimistic实现消息的乐观更新。当前遇到的问题：

• 添加乐观消息时，组件重渲染符合预期（仅新增的消息组件渲染）
• 当数据库返回真实消息并更新基础状态messages后，所有Message组件都会触发重渲染
• 注释掉addOptimisticMessage调用后，重渲染问题消失，确定问题与useOptimistic的使用相关

相关代码片段 #

Textarea组件提交处理函数 #

const handleSubmit = (_prevState: string, queryData: FormData) => {
    const message = queryData.get("message") as string;
    if (user && message) {
      startTransition(async () => {
        addOptimisticMessage({
          $id: "optimistic_message",
          // 其他消息字段
        });
        await submitAction(message, attachments);
      });
    }
  };

Room组件中useOptimistic初始化 #

const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (currentState: MessageObject[], newMessage: MessageObject) => [
      newMessage,
      ...currentState,
    ],
  );

消息数组渲染 #

{optimisticMessages.map((message: MessageObject, index: number) => (
  <Message key={message.$id} message={message} />
))}

Room组件消息监听与状态更新 #

useEffect(() => {
    if (room && room.$id) {
      const unsubscribeMessages = client.subscribe(
        `databases.${database}.collections.messages.documents`,
        (response) => {
          const payload = response.payload as MessageObject;
          const messageRoomId = payload.room.$id;
          if (messageRoomId === room.$id)
            setMessages((prevMessages) => [payload, ...prevMessages]);
        },
      );

      return () => {
        unsubscribeMessages();
      };
    }
  }, [room?.$id]);

问题原因 #

当数据库返回真实消息触发setMessages更新基础状态时，useOptimistic会基于新的messages重新计算乐观状态数组，生成全新的数组引用。若Message组件未做记忆化处理，React会默认认为所有子组件的props发生变化，导致全量重渲染。

而注释掉addOptimisticMessage后，optimisticMessages直接等于messages，此时React的diff算法可以通过复用数组中旧元素的引用，避免无意义的重渲染。

解决方案 #

1. 用React.memo包裹Message组件 #

这是最直接有效的方案，通过React.memo记忆化Message组件，确保仅当message props的内容或引用发生变化时才重渲染：

import { memo } from 'react';

const Message = memo(({ message }) => {
  // 组件原有渲染逻辑
});

export default Message;

2. 可选：优化消息对象的引用稳定性 #

如果后端返回的真实消息与乐观消息仅在$id等标识字段有差异，可在更新messages时尝试复用原有消息的引用（若内容完全一致），但通常后端返回的是全新对象，因此第一步的memo优化优先级更高。

验证效果 #

添加React.memo后，当真实消息替换乐观消息时，仅对应的两个Message组件（原乐观消息组件、新真实消息组件）会触发重渲染，其余消息组件因message props引用未变，不会执行重渲染逻辑。

内容的提问来源于stack exchange，提问作者Ninjonik