我对您的用例非常感兴趣，了解更多信息会很好，因为请求很奇怪，但我喜欢挑战，所以我开始了。
React具有无限循环检测功能，但您可以通过确保仅在每个DOM元素都已提交到DOM之后才添加DOM元素来实现这一点。

import { useState, useLayoutEffect } from "react";

export default function InfiniteDivAppender() {
  const [divCount, setDivCount] = useState(1);
  const [pause, setPause] = useState(false);

  useLayoutEffect(() => {
    if (pause) return;
    setImmediate(() => setDivCount((prev) => prev + 1));
  }, [divCount, pause]);

  return (
    <>
      <button onClick={() => setPause((prev) => !prev)}>
        {pause ? "Resume" : "Pause"}
      </button>
      {[...Array(divCount).keys()].map((n, index) => (
        <div key={index}>{index}</div>
      ))}
    </>
  );
}

请注意，这仍然是一个疯狂的浏览器操作量，您可能需要等待几秒钟的标签赶上，但它最终打印，它也不会触发循环检测，因为我使用的是setImmediate与useLayoutEffect（注意：而不是useEffect）。
注意控制台上的ctrl+c可能不会让你从崩溃的浏览器选项卡中解脱出来--它最终会崩溃，因为你不可能在一个网页上有无限的节点。

我用一个无限循环useEffect完成了这一点。看起来它在控制台中给了你一个关于最大深度的错误，但它似乎还在运行？

import "./styles.css";
import {useState, useEffect} from "react"

export default function App() {
  const [array, setArray] = useState([])
  useEffect(() => {
    setArray([...array, "hi"])
  }, [array])
  return (
    <div className="App">
      {array.map((_, i) => <h1 key={i}>#{i}</h1>)}
    </div>
  );
}