Merge pull request #1540 from GMOD/fix_memory_leak_blocks

Fix memory leak blocks
GMOD · Dec 11, 2020 · 2717a0f · 2717a0f
2 parents d458553 + 93dec1a
commit 2717a0f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js b/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js
@@ -9,16 +9,14 @@ export default ({ jbrequire }) => {
     const { data, html, filled, renderProps, renderingComponent } = model
 
     const ssrContainerNode = useRef(null)
-    const hydrated = useRef(false)
 
     useEffect(() => {
       const domNode = ssrContainerNode.current
-      const isHydrated = hydrated.current
       function doHydrate() {
         if (domNode && filled) {
-          if (domNode && domNode.innerHTML && isHydrated) {
+          if (domNode && domNode.innerHTML) {
             domNode.style.display = 'none'
-            requestIdleCallback(() => unmountComponentAtNode(domNode))
+            unmountComponentAtNode(domNode)
           }
           domNode.style.display = 'inline'
           domNode.innerHTML = html
@@ -40,6 +38,11 @@ export default ({ jbrequire }) => {
         }
       }
       doHydrate()
+      return () => {
+        if (domNode) {
+          unmountComponentAtNode(domNode)
+        }
+      }
     })
 
     return <g ref={ssrContainerNode} />

diff --git a/plugins/dotplot-view/src/ServerSideRenderedContent.tsx b/plugins/dotplot-view/src/ServerSideRenderedContent.tsx
@@ -54,15 +54,13 @@ class RenderErrorBoundary extends Component<{}, ErrorBoundaryState> {
 
 function ServerSideRenderedContent(props: { model: BlockModel }) {
   const ssrContainerNode = useRef<HTMLDivElement>(null)
-  const hydrated = useRef(false)
 
   const { model } = props
   const session = getSession(model)
   const theme = createJBrowseTheme(getConf(session, 'theme'))
 
   useEffect(() => {
     const domNode = ssrContainerNode.current
-    const isHydrated = hydrated.current
     function doHydrate() {
       const {
         data,
@@ -71,7 +69,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) {
         renderingComponent: RenderingComponent,
       } = model
       if (domNode && model.filled) {
-        if (isHydrated && domNode) {
+        if (domNode) {
           unmountComponentAtNode(domNode)
         }
         domNode.innerHTML = html
@@ -96,7 +94,6 @@ function ServerSideRenderedContent(props: { model: BlockModel }) {
               </ThemeProvider>,
               domNode,
             )
-            hydrated.current = true
           },
           { timeout: 300 },
         )
@@ -106,7 +103,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) {
     doHydrate()
 
     return () => {
-      if (domNode && isHydrated) {
+      if (domNode) {
         unmountComponentAtNode(domNode)
       }
     }

diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx
@@ -10,15 +10,13 @@ import type { BlockModel } from '../models/serverSideRenderedBlock'
 
 function ServerSideRenderedContent(props: { model: BlockModel }) {
   const ssrContainerNode = useRef<HTMLDivElement>(null)
-  const hydrated = useRef(false)
 
   const { model } = props
   const session = getSession(model)
   const theme = createJBrowseTheme(getConf(session, 'theme'))
 
   useEffect(() => {
     const domNode = ssrContainerNode.current
-    const isHydrated = hydrated.current
     function doHydrate() {
       const {
         data,
@@ -28,7 +26,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) {
         renderingComponent: RenderingComponent,
       } = model
       if (domNode && filled) {
-        if (isHydrated && domNode) {
+        if (domNode) {
           unmountComponentAtNode(domNode)
         }
         domNode.innerHTML = html
@@ -64,7 +62,6 @@ function ServerSideRenderedContent(props: { model: BlockModel }) {
               </ThemeProvider>,
               domNode,
             )
-            hydrated.current = true
           },
           { timeout: 300 },
         )
@@ -74,7 +71,7 @@ function ServerSideRenderedContent(props: { model: BlockModel }) {
     doHydrate()
 
     return () => {
-      if (domNode && isHydrated) {
+      if (domNode) {
         unmountComponentAtNode(domNode)
       }
     }