React use Hook为何发起三次请求？已排除StrictMode影响

核心问题：未缓存Promise实例 #

你的代码中，JokeItem组件每次渲染时都会调用fetchData()创建全新的Promise实例，结合React use Hook与Suspense的工作机制，会触发多次请求：

• 首次渲染：调用fetchData()发起请求，Promise处于pending状态，Suspense暂停渲染等待结果。
• Promise resolve后的校验渲染：React处理Suspense时会进行额外渲染校验，若无缓存，会再次调用fetchData()发起新请求。
• 组件重渲染触发：Promise resolve后组件重新渲染，未缓存的fetchData()会触发第三次请求。

解决方案：缓存Promise实例 #

通过useMemo缓存Promise实例，确保组件重渲染时不会重复创建新请求：

import { use, Suspense, useMemo } from 'react'

const fetchData = async () => {
  const res = await fetch('https://api.chucknorris.io/jokes/random')
  return res.json()
}

const JokeItem = () => {
  // 用useMemo缓存Promise，避免每次渲染重复创建
  const jokePromise = useMemo(() => fetchData(), [])
  const joke = use(jokePromise)
  return <h2>{joke.value}</h2>
}

export default function Joke() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <JokeItem />
    </Suspense>
  )
}

补充说明 #

• use Hook要求传入稳定的Promise引用，若每次传入新Promise，React会判定为新异步任务，重复处理。
• 生产环境仍出现多次请求，是Suspense与use Hook的协作逻辑导致，和StrictMode无关。

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