useMemo因依赖项有函数导致缓存效果失效该如何解决？

Question

问题是这样的

我有一个RenderForm的组件用于生成对应的表单

其中他需要接收一些参数，比如config、onChange

其中config是一个数组，用于告诉组件该生成什么组件（输入框、复选框）；onChange是一个函数，是检测用户输入变化的回调

我在编写代码中希望通过useMemo来减少RenderForm组件的渲染开销

const FormRender = ({ config, onChange })=>{
    return React.useMemo(()=>{
        /* some code ...*/
        return (
            <>
                { config.map((item,index)=>(<Com key={index} {...item.childprops} onChanged={ onChange } />)}
            </>
        )
    },
    [config,onChange]
)}

我期望的是有且仅当 Config 出现变化的时候，RenderForm才会重新渲染, 但是因为ESlint的缘故我也将 onChange 函数放入了依赖项中

当依赖项存在 onChange时，RenderForm组件并不会因为useMemo而减少了开销，而是依赖父组件的变化而再次渲染（config没有发生变化）

我认为这是因为 ()=>{} !== ()=>{} 的检测机制导致useMemo无法按我预期的去缓存渲染结果

相关讨论: JSX-no-bind

去掉onChange之后，又会有ESlint警告

React Hook React.useMemo has a missing dependency: 'onChange'. Either include it or remove the dependency array. If 'onChange' changes too often, find the parent component that defines it and wrap that definition in useCallback

这里想了解遇到这种情况时该如何去处理？，提示提到说用 useCallBack去做相应处理我不知道怎么去写

我的尝试是

const handlerOnChange = useCallBack(onChange,[])

useMemo(()=>{ /* more code */ },[ config, handlerOnChange ])

但这样也同样会因为缺少依赖性触发ESlint警告 react-hooks/exhaustive-deps

Tips

1. 非内联函数的解决方案及影响父组件编码方式的方案（ 参考文章）我对此不感兴趣，当然如果只有这种方案的话那另说。
2. 关闭 ESlint检测，如果上述提到的ESlint规则在我的场景中不适用的也可以提出

Answer 1

function useEvent(callback) {
  const callbackRef = useRef(null);
  callbackRef.current = callback;
  const event = useCallback((...args) => {
    if (callbackRef.current) {
      callbackRef.current.apply(null, args);
    }
  }, []);

  return event;
}