use-deep-compare-effect

wax-prosemirror-components/package.json

@@ -21,6 +21,7 @@
     "react-transition-group": "^4.3.0",
     "styled-components": "^4.2.0",
     "uuid": "^7.0.3",
+    "use-deep-compare-effect": "^1.3.1",
     "wax-prosemirror-core": "^0.0.13",
     "wax-prosemirror-utilities": "^0.0.13",
     "wax-prosemirror-themes": "^0.0.13"

wax-prosemirror-components/src/components/rightArea/RightArea.js

@@ -6,6 +6,7 @@ import React, {
   useMemo,
   useCallback,
 } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import { each, uniqBy, sortBy } from 'lodash';
 import { WaxContext } from 'wax-prosemirror-core';
 import { DocumentHelpers } from 'wax-prosemirror-utilities';
@@ -124,7 +125,7 @@ export default ({ area }) => {
     return allCommentsTop;
   });
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     setMarksNodes(updateMarks(view));
     if (isFirstRun) {
       setTimeout(() => {
@@ -134,7 +135,7 @@ export default ({ area }) => {
     } else {
       setPosition(setTops());
     }
-  }, [JSON.stringify(updateMarks(view)), JSON.stringify(setTops())]);
+  }, [updateMarks(view), setTops()]);
 
   const CommentTrackComponent = useMemo(
     () => (