Javascript 使用react挂钩将外部库包装为受控组件：useEffect依赖项问题

我正在尝试使用Functional组件为“jsoneditor”库创建一个薄包装。我是个新手，到目前为止主要是用钩子工作。因此，我尝试将库作者给出的示例改编为使用挂钩：

这就是我到目前为止的想法：

import React，{useRef，useState，useffect，useCallback}来自“React”
从“JSONEditor”导入JSONEditor
从“./JSONEditorReact.module.css”导入样式
导入'jsoneditor/dist/jsoneditor.css'；
函数App（）{
const[json，setJson]=useState（{some_key:“some_value”}）
函数onChangeJson（json）{
setJson（json）
}
返回
}
函数JSONEditorReact（{onChangeJson，json}）{
const containerRef=useRef（）
const editorRef=useRef（）//用作命名空间以引用jsoneditor对象
使用效果(
() => {
控制台日志（“安装”）
常量选项={
模式：['tree'、'form'、'view'、'text']，
onChangeJSON:onChangeJSON
}
editorRef.current=新的JSONEditor（containerRef.current，选项）
return（）=>editorRef.current.destroy（）
},
[]//eslint抱怨此处缺少依赖项“onChangeJson”
)
使用效果(
() => {
控制台日志（“更新”）
editorRef.current.update（json）
},
[json]
)
返回(
)
}
导出默认应用程序；

它是有效的——但eslint抱怨onChangeJson是useEffect中缺少的依赖项。如果我将其作为依赖项添加，则每次用户向json编辑器输入内容时，useEffect都会运行。这意味着用户在每次输入字符时都会失去对编辑器的关注。我的理解是，当它发生时，会调用App的setJson函数，因此会刷新App组件，导致onChangeJson函数被重新实例化，因此会重新运行第一个useffect，并实例化一个新的JSONEditor

我有一些想法，但似乎并不令人满意：

• 使用useCallback定义onChangeJson-问题：我发现每当我想使用我的组件时调用useCallback都会让人望而生畏
• 将App的setter函数setJson作为JSONEditorReact的“onChangeJson”属性传递-问题：如果我想执行更多操作，而不仅仅是在回调中设置状态，该怎么办

还有什么相关的想法可以解决缺少依赖性的问题，而不必在每个输入上运行第一个useEffect

这是一种使用钩子的类组件比功能组件更相关的用例吗？（使用类组件的包装器看起来比我的更简单，我必须使用ref创建一个名称空间来保存我的JSONEditor实例）