diff --git a/wax-prosemirror-components/package.json b/wax-prosemirror-components/package.json
index b1e2df599461d04ec72d7a132a7d0c779eba3325..cfb0da02f1e61f36036e4f0c9fb0bbe588d4b3bf 100644
--- a/wax-prosemirror-components/package.json
+++ b/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"
diff --git a/wax-prosemirror-components/src/components/rightArea/RightArea.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js
index df40b2f2a63842246f1220c53a354b7c4b39b844..a11ecbbb708743a0a9514d2dad8b82b6523b1f71 100644
--- a/wax-prosemirror-components/src/components/rightArea/RightArea.js
+++ b/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(
     () => (