Use mutate as effect hook

packages/web/components/templates/article/HighlightsLayer.tsx

@@ -19,7 +19,6 @@ import { HighlightBar, HighlightAction } from '../../patterns/HighlightBar'
 import { removeHighlights } from '../../../lib/highlights/deleteHighlight'
 import { createHighlight } from '../../../lib/highlights/createHighlight'
 import { HighlightNoteModal } from './HighlightNoteModal'
-import { NotebookModal } from './NotebookModal'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { ArticleMutations } from '../../../lib/articleActions'
 import { isTouchScreenDevice } from '../../../lib/deviceType'

packages/web/components/templates/article/Notebook.tsx

@@ -216,9 +216,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
     return () => {
       document.removeEventListener('highlightsUpdated', highlightsUpdated)
     }
-  }, [forceUpdate])
-
-  console.log('articleData: ', articleData)
+  }, [mutate])
 
   return (
     <VStack