有关 react.useEffect dependency list 的一个问题，如何避免频繁触发？

大概的代码如下：

interface Props { onChange?: () => void; } const MyComponent: React.FC<Props> = (props: Props) => { const { onChange } = props; const [checkedItems, setCheckedItems] = React.useState([]); React.useEffect(() => { onChange?.(checkedItems); }, [checkedItems, onChange]); } 

能够正常工作，但是有一个问题，该 effect 每次 re-render 的时候，都会被调用。
因为 parent component 也是一个 function component ，所以，onChange 的 reference/pointer 总是在变。
我想把 onChange 从 dependency list 里面去掉，但 ts/eslint 一直警告，不让我这么干...

我现在能够做的就是在 parent component 里面，使用 useCallback 或者 useMemo 记住这个方法，再传递给子组件 MyComponent's props

const OnChange= useCallback((）=> {}); 

虽然能够解决问题，但要求 parent 在使用 MyComponent 的时候，知道这个细节。我觉得这样不是好的 design 。

有没有什么办法改进一？难道要去 disable ts/eslint 的警告？

谢谢！