diff --git a/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js b/plugins/circular-view/src/BaseChordDisplay/components/RpcRenderedSvgGroup.js
index 7f92fac047..46961c005f 100644
--- 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
index 6fa29e1d2c..d7287e8d8f 100644
--- a/plugins/dotplot-view/src/ServerSideRenderedContent.tsx
+++ b/plugins/dotplot-view/src/ServerSideRenderedContent.tsx
@@ -54,7 +54,6 @@ 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)
@@ -62,7 +61,6 @@ function ServerSideRenderedContent(props: { model: BlockModel }) {
 
   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
index efd6e3600f..0311d9d310 100644
--- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx
+++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/ServerSideRenderedContent.tsx
@@ -10,7 +10,6 @@ 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)
@@ -18,7 +17,6 @@ function ServerSideRenderedContent(props: { model: BlockModel }) {
 
   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)
       }
     }