如何在Tiptap中正确使用防抖（debounce）功能？

问题根源在于每次组件渲染时都会重新创建一个新的防抖函数实例，导致编辑器每次更新触发的都是独立的防抖函数，无法实现累计延迟效果。

修复方案 #

使用React的useCallback钩子包裹防抖函数，保证组件渲染时始终复用同一个防抖函数引用：

import { useCallback } from 'react';
const debounce = require("lodash.debounce");

// 在组件内部定义防抖函数
const debouncedUpdate = useCallback(
  debounce((editor) => {
    updateContent({
      documentId: document?.[0]?._id as Id<"aipen">,
      content: editor?.getHTML(),
    });
  }, 2000),
  [document, updateContent] // 依赖数组：当这些值变化时，重新创建防抖函数
);

const editor = useEditor({
  extensions: [StarterKit],
  onUpdate: ({ editor }) => debouncedUpdate(editor),
});

额外说明 #

• useCallback会缓存函数引用，避免组件每次渲染都生成新的防抖实例
• 依赖数组中需要包含document和updateContent，确保当这些值变更时，防抖函数能获取到最新的数据和方法
• 若需要调整防抖行为（比如首次触发立即执行），可以给debounce添加配置参数：debounce(func, 2000, { leading: true })

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