editor: defer update propagation by 100ms

by default our editor sends an update "signal" on every single transaction.
This is oftentimes unnecessary. We can
improve the responsiveness by deferring this so multiple transactions cause
1 rerender.
This commit is contained in:
Abdullah Atta
2022-09-29 12:11:41 +05:00
committed by Abdullah Atta
parent 02459d759f
commit f69afd2d9a

View File

@@ -34,6 +34,7 @@ export const useEditor = (
const [editor, setEditor] = useState<Editor | null>(null);
const forceUpdate = useForceUpdate();
const editorRef = useRef<Editor | null>(editor);
const updateTimeout = useRef<number>();
useEffect(
() => {
@@ -44,6 +45,8 @@ export const useEditor = (
setEditor(instance);
instance.on("transaction", () => {
clearTimeout(updateTimeout.current);
updateTimeout.current = setTimeout(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
if (isMounted) {
@@ -51,6 +54,7 @@ export const useEditor = (
}
});
});
}, 100) as unknown as number;
});
return () => {