From 23abd39ff6ee5e558a875d67c5c40b7e5a57a9b1 Mon Sep 17 00:00:00 2001
From: Sujal Goel <goelsujal9@gmail.com>
Date: Thu, 2 Apr 2026 21:19:13 +0530
Subject: [PATCH] fix(SidebarMobile): move body event listeners to lifecycle
 methods

Calling _toggleBodyListener inside render() causes side effects on
every render cycle. React StrictMode double-invokes renders in dev,
which leads to unpredictable listener state. Also, listeners were
never cleaned up on unmount when isOpen was true, causing a leak.

Move listener management to componentDidMount, componentDidUpdate
(only when isOpen changes), and componentWillUnmount.

Fixes #8148
---
 src/components/SidebarMobile/SidebarMobile.jsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/SidebarMobile/SidebarMobile.jsx b/src/components/SidebarMobile/SidebarMobile.jsx
index dd9077fe09c4..812f01b1c9c8 100644
--- a/src/components/SidebarMobile/SidebarMobile.jsx
+++ b/src/components/SidebarMobile/SidebarMobile.jsx
@@ -18,9 +18,24 @@ export default class SidebarMobile extends Component {
     sections: PropTypes.array,
   };
 
+  componentDidMount() {
+    if (this.props.isOpen) {
+      this._toggleBodyListener(true);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.isOpen !== this.props.isOpen) {
+      this._toggleBodyListener(this.props.isOpen);
+    }
+  }
+
+  componentWillUnmount() {
+    this._toggleBodyListener(false);
+  }
+
   render() {
     const { isOpen, toggle } = this.props;
-    this._toggleBodyListener(isOpen);
 
     return (
       <nav