为何传递自Props的未变更函数会触发useEffect？

核心原因 #

你遇到的问题本质是函数引用变化触发了useEffect，具体过程如下：

• 主组件里的closeDialog函数定义在组件内部，每次主组件重新渲染（比如点击Cancel执行setIsOpenDialog(false)时），都会生成一个全新的函数对象。
• 主组件重新渲染后，传给MyDialog的onClose props就变成了这个新的函数引用。
• MyDialog的useEffect依赖数组包含onClose，一旦onClose的引用发生变化，useEffect就会被触发执行。

解决办法 #

用React的useCallback钩子缓存closeDialog函数，确保每次渲染时函数引用保持一致：

import { useCallback } from 'react';

// 主组件内
const closeDialog = useCallback(() => setIsOpenDialog(false), [setIsOpenDialog]);

useCallback会把函数和依赖数组绑定，只有当依赖数组里的setIsOpenDialog变化时（通常不会发生），才会生成新的函数。这样传给MyDialog的onClose引用就稳定了，不会再触发不必要的useEffect。

内容的提问来源于stack exchange，提问作者csikos.balint