React新use()钩子陷入无限循环，求解决方案？

你代码的问题 #

1. 无限循环原因：每次组件渲染时，fetch('some_url')都会生成一个新的Promise实例，use()钩子处理这个Promise后，数据返回会触发组件重新渲染，再次创建新的Promise发起请求，往复形成无限循环。
2. 错误的use()用法：use()钩子只接受Promise或thenable对象作为参数，不支持回调函数和依赖数组的写法，你混淆了它和useEffect的用法，所以会报错。

正确解决方案 #

用useMemo缓存Promise实例，避免每次渲染都创建新的请求Promise，确保请求仅发起一次：

方案1：拆分请求与解析 #

import { use, useMemo } from 'react'

const Component = () => {
    // 用useMemo缓存fetch请求的Promise，空依赖数组确保仅首次渲染时创建
    const fetchPromise = useMemo(() => fetch('some_url'), [])
    const response = use(fetchPromise)
    
    // 缓存response.json()的Promise，依赖response确保仅在响应变化时重新解析
    const dataPromise = useMemo(() => response.json(), [response])
    const data = use(dataPromise)

    return <div>{JSON.stringify(data)}</div>
}

方案2：合并请求与解析（更简洁） #

import { use, useMemo } from 'react'

const Component = () => {
    // 合并fetch和json解析逻辑，用useMemo缓存整个Promise链
    const dataPromise = useMemo(() => 
        fetch('some_url').then(res => res.json()), 
        []
    )
    const data = use(dataPromise)

    return <div>{JSON.stringify(data)}</div>
}

关键说明 #

• useMemo的作用是缓存Promise实例，空依赖数组[]表示仅在组件首次挂载时创建一次Promise，后续渲染复用同一个实例，避免重复发起请求。
• use()钩子会暂停组件渲染直到传入的Promise resolve，需确保你的组件是客户端组件（比如在Next.js中需添加'use client'指令）。

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