React中移除数组首项触发无限更新循环，求解决方案

错误根源 #

1. createRef误用：函数组件中createRef会在每次渲染时生成新的引用对象，导致useLayoutEffect因依赖频繁变化反复执行。
2. 依赖数组不完整：useLayoutEffect用到了recent和onSearch但未加入依赖，引发闭包捕获旧状态、无意义重复触发的问题。
3. 状态更新方式错误：直接使用当前recent值更新状态，无法获取最新状态，且易触发无限更新循环。

修复步骤及代码示例 #

import { useState, useRef, useLayoutEffect } from 'react';

const [recent, setRecent] = useState(["Dubai", "Paris", "London", "paris", "new york", "dubai", "New York"]);

const InsideSection = () => {
  // 用useRef替代createRef，保持引用稳定
  const ulRef = useRef();

  useLayoutEffect(() => {
    if (onSearch && ulRef.current) {
      const element = ulRef.current;
      // 双重判断：DOM溢出+列表长度超6，避免不必要的更新
      if (element.scrollHeight > element.clientHeight && recent.length > 6) {
        // 函数式更新，确保基于最新状态修改
        setRecent(prevState => prevState.slice(1));
      }
    }
  }, [onSearch, recent]); // 补充所有用到的依赖

  if (onSearch) {
    return (
      <div className="search-container">
          {/* 其他组件内容 */}
          <ul ref={ulRef}>
              <RecentSearches />
          </ul> 
      </div>
    );
  }
  return null;
}

关键说明 #

• useRef替代createRef：函数组件中useRef会在整个生命周期内保持同一个引用，避免因引用变化触发不必要的effect执行。
• 函数式更新状态：setRecent(prev => prev.slice(1))通过回调获取最新状态，彻底解决闭包捕获旧值的问题。
• 完善依赖数组：将onSearch和recent加入依赖，确保effect仅在相关值变化时执行，从根源避免无限循环。
• 双重判断逻辑：结合DOM溢出检查和列表长度判断，减少无效的DOM操作与状态更新，提升性能。

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