extract code into useFirstDraw hook (#689)

src/components/editor/editor.tsx

@@ -14,6 +14,7 @@ import { DocumentBar } from './document-bar/document-bar'
 import { ScrollingDocumentRenderPane } from './document-renderer-pane/scrolling-document-render-pane'
 import { EditorPane } from './editor-pane/editor-pane'
 import { editorTestContent } from './editorTestContent'
+import { useFirstDraw } from './hooks/useFirstDraw'
 import { DualScrollState, ScrollState } from './scroll/scroll-props'
 import { shortcutHandler } from './shortcut/shortcut'
 import { Splitter } from './splitter/splitter'
@@ -35,7 +36,6 @@ export const Editor: React.FC = () => {
   const untitledNote = t('editor.untitledNote')
   const [markdownContent, setMarkdownContent] = useState(editorTestContent)
   const isWide = useMedia({ minWidth: 576 })
-  const [firstDraw, setFirstDraw] = useState(true)
   const [documentTitle, setDocumentTitle] = useState(untitledNote)
   const noteMetadata = useRef<YAMLMetaData>()
   const firstHeading = useRef<string>()
@@ -82,15 +82,13 @@ export const Editor: React.FC = () => {
     }
   }, [])
 
-  useEffect(() => {
+  const isFirstDraw = useFirstDraw()
-    setFirstDraw(false)
-  }, [])
 
   useEffect(() => {
-    if (!firstDraw && !isWide && editorMode === EditorMode.BOTH) {
+    if (!isFirstDraw && !isWide && editorMode === EditorMode.BOTH) {
       setEditorMode(EditorMode.PREVIEW)
     }
-  }, [editorMode, firstDraw, isWide])
+  }, [editorMode, isFirstDraw, isWide])
 
   const onMarkdownRendererScroll = useCallback((newScrollState: ScrollState) => {
     if (scrollSource.current === ScrollSource.RENDERER && editorSyncScroll) {
@@ -129,7 +127,9 @@ export const Editor: React.FC = () => {
             <ScrollingDocumentRenderPane
               content={markdownContent}
               onFirstHeadingChange={onFirstHeadingChange}
-              onMakeScrollSource={() => { scrollSource.current = ScrollSource.RENDERER }}
+              onMakeScrollSource={() => {
+                scrollSource.current = ScrollSource.RENDERER
+              }}
               onMetadataChange={onMetadataChange}
               onScroll={onMarkdownRendererScroll}
               onTaskCheckedChange={onTaskCheckedChange}

src/components/editor/hooks/useFirstDraw.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react'
+
+export const useFirstDraw = ():boolean => {
+  const [firstDraw, setFirstDraw] = useState(true)
+
+  useEffect(() => {
+    setFirstDraw(false)
+  }, [])
+
+  return firstDraw
+}