Unobserve status on unmount (#3851)

2 files changed, 17 insertions, 0 deletions

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 7ca898c39..3b8f88bf7 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -88,6 +88,16 @@ class Status extends ImmutablePureComponent {
     );
   }
 
+  componentWillUnmount () {
+    if (!this.props.intersectionObserverWrapper) {
+      // TODO: enable IntersectionObserver optimization for notification statuses.
+      // These are managed in notifications/index.js rather than status_list.js
+      return;
+    }
+
+    this.props.intersectionObserverWrapper.unobserve(this.props.id, this.node);
+  }
+
   handleIntersection = (entry) => {
     // Edge 15 doesn't support isIntersecting, but we can infer it
     // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12156111/
diff --git a/app/javascript/mastodon/features/ui/util/intersection_observer_wrapper.js b/app/javascript/mastodon/features/ui/util/intersection_observer_wrapper.js
index 0e959f9ae..b15f8b9ef 100644
--- a/app/javascript/mastodon/features/ui/util/intersection_observer_wrapper.js
+++ b/app/javascript/mastodon/features/ui/util/intersection_observer_wrapper.js
@@ -37,6 +37,13 @@ class IntersectionObserverWrapper {
     }
   }
 
+  unobserve (id, node) {
+    if (this.observer) {
+      delete this.callbacks[id];
+      this.observer.unobserve(node);
+    }
+  }
+
   disconnect () {
     if (this.observer) {
       this.observer.disconnect();