stabilize useRect

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -87,7 +87,8 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   const { t } = useTranslation();
 
-  const [previewRect, previewRef] = useRect();
+  const previewRef = useRef<HTMLDivElement>(null);
+  const [previewRect] = useRect(previewRef);
 
   const { data: isNotFound } = useIsNotFound();
   const { data: pageId } = useCurrentPageId();
@@ -307,7 +308,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
     isOriginOfScrollSyncEditor = true;
     scrollEditor(codeMirrorEditor.view.scrollDOM, previewRef.current);
-  }, [codeMirrorEditor, previewRef]);
+  }, [codeMirrorEditor]);
 
   const scrollEditorHandlerThrottle = useMemo(() => throttle(25, scrollEditorHandler), [scrollEditorHandler]);
 
@@ -323,7 +324,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
     isOriginOfScrollSyncPreview = true;
     scrollPreview(codeMirrorEditor.view.scrollDOM, previewRef.current);
-  }, [codeMirrorEditor, previewRef]);
+  }, [codeMirrorEditor]);
 
   const scrollPreviewHandlerThrottle = useMemo(() => throttle(25, scrollPreviewHandler), [scrollPreviewHandler]);
 

packages/ui/src/utils/use-rect.ts

@@ -1,6 +1,8 @@
-// ref: https://gist.github.com/morajabi/523d7a642d8c0a2f71fcfa0d8b3d2846?permalink_comment_id=4688158#gistcomment-4688158
+// based on https://gist.github.com/morajabi/523d7a642d8c0a2f71fcfa0d8b3d2846?permalink_comment_id=4688158#gistcomment-4688158
 
-import { useState, useRef, useEffect } from 'react';
+import {
+  useState, useEffect, RefObject, useCallback,
+} from 'react';
 
 type MutableRefObject<T> = {
   current: T
@@ -24,29 +26,28 @@ const useEffectInEvent = (
 };
 
 export const useRect = <T extends HTMLDivElement | null>(
+  reference: RefObject<T>,
   event: EventType = 'resize',
 ): [DOMRect | undefined, MutableRefObject<T | null>, number] => {
   const [rect, setRect] = useState<DOMRect>();
 
-  const reference = useRef<T>(null);
-
   const [screenHeight, setScreenHeight] = useState(window.innerHeight);
 
-  const set = (): void => {
+  const set = useCallback(() => {
     setRect(reference.current?.getBoundingClientRect());
-  };
+  }, [reference]);
 
   useEffectInEvent(event, true, set);
-  const handleResize = () => {
+  const handleResize = useCallback(() => {
     setScreenHeight(window.innerHeight);
-  };
+  }, []);
 
   useEffect(() => {
     window.addEventListener(event, handleResize);
     return () => {
       window.removeEventListener(event, handleResize);
     };
-  }, [event]);
+  }, [event, handleResize]);
 
   return [rect, reference, screenHeight];
 };