useEffect依赖含spread操作的useCallback触发大量重复渲染问题

问题根本原因 #

你当前出现无限重渲染的核心原因是useCallback的依赖项包含了todoList：每次调用setTodoList更新列表后，todoList引用发生变化，就会生成新的onSortHandler实例；子组件的useEffect检测到onSortHandler变化后会再次执行，重新触发排序更新，最终形成无限循环。

解决方案 #

修改父组件的onSortHandler，使用setState的函数式更新语法，不需要将todoList加入useCallback的依赖数组：

const onSortHandler = useCallback((property: string, direction: string) => {
  setTodoList(prevList => {
    // 先浅拷贝原数组再排序，避免sort原地修改原状态
    return [...prevList].sort(/**<sort function snipped>**/);
  });
}, []);

方案说明 #

• 函数式更新的入参prevList会自动拿到最新的todoList状态，无需手动将todoList加入依赖
• useCallback依赖数组为空，onSortHandler实例只会在组件初始化时生成一次，引用稳定不会频繁变化
• 仍保留了数组浅拷贝的逻辑，排序后返回新数组可以正常触发组件重渲染

修改完成后，子组件的useEffect只会在sort状态真正发生变化时才执行排序逻辑，完全符合eslint的依赖检查规范，同时不会出现无限重渲染的问题。

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