使用自定义React Hook触发Too many re-renders无限重渲染如何解决？

你的自定义Hook useContent 在函数顶层直接执行了状态更新逻辑，这是触发无限重渲染的核心原因：

// useContent 函数内的顶层代码，没有包裹在任何副作用或回调中
setArContent(localCache[title]);
setStatus("loaded");

React的组件和自定义Hook每次渲染时都会逐行执行顶层代码，上述两个状态更新函数每次渲染都会被调用，状态更新又会触发新一轮渲染，往复循环触发了React的重渲染次数限制报错。

1. 异步请求函数 requestArContent 未定义title入参，内部赋值缓存时读取的title是undefined，无法正确存储对应标题的缓存数据。
2. 异步请求完成后没有触发状态更新，就算请求拿到了数据，组件也无法感知到内容变化。

// useContent.js
import { useState, useEffect } from "react";

const localCache = {};
// 新增title入参
async function requestArContent(title) {
  console.log("pinging server for content");
  const res = await fetch(`${BASE_URL}/api/books`);
  const json = (await res.json()) || {};
  localCache[title] = json;
  return json;
}

export function useContent(title) {
  const [arContent, setArContent] = useState({});
  const [status, setStatus] = useState("unloaded"); // unloaded, loading, loaded

  useEffect(() => {
    if (!title) {
      setArContent({});
      setStatus("loaded");
      return;
    }
    if (localCache[title]) {
      setArContent(localCache[title]);
      setStatus("loaded");
      return;
    }
    setStatus("loading");
    // 请求完成后更新状态
    requestArContent(title).then(res => {
      setArContent(res);
      setStatus("loaded");
    })
  }, [title]);

  // 删除顶层状态更新逻辑，直接返回状态即可
  return [arContent, status];
}

你的LiveStreaming组件内的useEffect逻辑无需调整，替换修正后的useContent即可解决报错。

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