(简体中文) Modern React on Client Side

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme)
  })

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId)
    connection.on('connected', () => {
      onConnected()
    })
    connection.connect()
    return () => connection.disconnect()
  }, [roomId])

  // ...
}

const useMessages = (roomId) => useSWR(..., { suspense: true })

function ChatRoom({ roomId }) {
  // messages 不会是 undefined，可以把 isLoading 扔了
  const { data: messages } = useMessages(roomId)
  const [state, formAction, isPending] = useActionState(sendMessageAPI, null)
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [...state, newMessage]
  )

  const activeCount = optimisticMessages.filter(m => !m.archived).length

  return (
    <div>
      <MessageList messages={optimisticMessages} />
      <div className="status">Active: {activeCount}</div>
      
      <form action={async (formData) => {
          const msg = formData.get('message')
          addOptimisticMessage({ text: msg, sending: true })
          await formAction(formData)
      }}>
        <input name="message" />

         {/* 内部使用 useFormStatus，无需传递状态 */}
        <SubmitButton />
      </form>
    </div>
  )
}

// 继承 isSubmitting 状态 :(
function SubmitButtonLegacy({ isSubmitting }) {
  return (
    <button type="submit" disabled={isSubmitting}>
      {isSubmitting ? 'Sending...' : 'Send'}
    </button>
  )
}

function ChatRoomLegacy({ roomId }) {
  // 经典三件套！
  const [messages, setMessages] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [fetchError, setFetchError] = useState(null)

  useEffect(() => {
    let ignore = false // 处理竞态条件
    
    async function fetchData() {
      setIsLoading(true)
      setFetchError(null)
      try {
        const data = await fetchMessagesAPI(roomId)
        if (!ignore) {
          setMessages(data)
        }
      } catch (err) {
        if (!ignore) setFetchError(err)
      } finally {
        if (!ignore) setIsLoading(false)
      }
    }

    fetchData() // 嗯。说实话我还不如用 .then.catch.finally

    return () => {
      ignore = true
    }
  }, [roomId]) // 我最爱的依赖数组 🥰

  // 又来。
  const [isSending, setIsSending] = useState(false)
  const [sendError, setSendError] = useState(null)

  // 我们需要一个 ref 来防止闭包陷阱，或者使用函数式更新
  // 我们需要手动修改 messages 并在失败时回滚  
  const handleSendMessage = async (e) => {
    e.preventDefault() // 必须阻止默认行为
    const formData = new FormData(e.target)
    const msgText = formData.get('message')
    
    if (!msgText) return

    // 第一步 乐观更新
    const tempId = Date.now()
    const optimisticMsg = { id: tempId, text: msgText, sending: true }
    
    setMessages((prev) => [...prev, optimisticMsg])
    setIsSending(true)
    setSendError(null)
    e.target.reset() // 手动清空表单

    try {
      // 第二步 发送请求
      const newServerMsg = await sendMessageAPI(msgText)
      
      // 第三步 成功：用服务器返回的真实数据替换临时数据
      setMessages((prev) => 
        prev.map(m => m.id === tempId ? newServerMsg : m)
      )
    } catch (err) {
      // 第四步 失败：手动回滚（非常容易写错！）
      setSendError(err)
      setMessages((prev) => prev.filter(m => m.id !== tempId))
      // 甚至还需要把输入框的内容恢复回去，这里省略了，太麻烦
    } finally {
      setIsSending(false)
    }
  }
 
  const activeCount = useMemo(() => {
    return messages.filter(m => !m.archived).length
  }, [messages]) // 小心翼翼写依赖。

  // 骨架屏又忘记做了。算了写个 Loading 以后再说
  if (isLoading) return <div>Loading...</div>
  if (fetchError) return <div>Error: {fetchError.message}</div>

  // 终于！吟唱了那么久，终于……不对！这么简单的 UI，为什么需要如此冗长的逻辑？我不理解 😭
  return (
    <div>
      <MessageList messages={messages} />
      <div className="status">Active: {activeCount}</div>
      <form onSubmit={handleSendMessage}>
        <input name="message" disabled={isSending} />
        <SubmitButtonLegacy isSubmitting={isSending} />
        {sendError && <div className="error">Failed to send</div>}
      </form>
    </div>
  )
}