react-chessboard组件持续触发Maximum update depth exceeded警告排查

你遇到的问题核心是内部定义的组件导致React.memo失效，同时可能伴随react-chessboard组件内部的循环状态更新，以下是具体解决步骤：

1. 修复组件定义位置导致的memo失效 #

你把ChessImage组件定义在ChessCollector函数内部，这会导致每次ChessCollector渲染时，ChessImage都会被重新创建为一个全新的组件类型。React.memo只能对比props，无法识别这种组件引用变化，自然无法阻止重渲染。

修改方案：将ChessImage移到ChessCollector外部：

import React from 'react';
import {Chessboard} from 'react-chessboard';

// 移到外部，确保组件引用稳定
const ChessImage = React.memo(({ fen, id }) => {
  return (
    <Chessboard
      position={fen}
      id={id}
    />
  );
});

function ChessCollector() {
  return (
    <div>
      <ChessImage
        fen={'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq - 0 1'}
        id={'1'}
      />
    </div>
  );
}

export default ChessCollector;

2. 排查react-chessboard内部循环更新问题 #

如果修改组件位置后仍出现Maximum update depth exceeded警告，大概率是react-chessboard组件内部存在循环状态更新（比如useEffect未正确设置依赖，导致每次渲染都触发setState）。

解决方式：

• 检查当前使用的react-chessboard版本，查看官方仓库的issues，确认是否是已知bug；
• 尝试升级到最新稳定版，或降级到之前无此问题的版本；
• 若需要临时规避，可以给Chessboard组件包裹一层额外的memo，并确保传递的props完全稳定（比如用useMemo缓存动态生成的fen）。

3. 额外验证步骤 #

• 用React DevTools的Profiler工具，查看重渲染的触发源，确认是Chessboard内部还是父组件导致；
• 确保没有其他隐式的状态更新逻辑（比如全局状态变化、事件监听重复绑定等）。

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