Skip to content

fix(SidebarMobile): move body event listeners to lifecycle methods#8155

Merged
alexander-akait merged 1 commit intowebpack:mainfrom
sujalgoel:fix/sidebar-mobile-listener-lifecycle
Apr 2, 2026
Merged

fix(SidebarMobile): move body event listeners to lifecycle methods#8155
alexander-akait merged 1 commit intowebpack:mainfrom
sujalgoel:fix/sidebar-mobile-listener-lifecycle

Conversation

@sujalgoel
Copy link
Copy Markdown
Contributor

Summary

_toggleBodyListener was called inside render(), which runs on every re-render, not just when isOpen changes. The listeners don't actually duplicate (_handleBodyClick is a stable class field reference, so addEventListener deduplicates by reference), but side effects in render() break React's purity contract. React StrictMode double-invokes renders in dev, so listener state becomes unpredictable. There was also no cleanup on unmount - if the sidebar was open when the component unmounted, the touchstart and mousedown listeners on window would just stay there.

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

Fixes #8148.

What kind of change does this PR introduce?

fix

Did you add tests for your changes?

No

Does this PR introduce a breaking change?

No

If relevant, what needs to be documented once your changes are merged or what have you already documented?

N/A

Use of AI

No

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 webpack#8148
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 2, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
webpack-js-org Ready Ready Preview, Comment Apr 2, 2026 3:58pm

Request Review

@alexander-akait alexander-akait merged commit 78494e5 into webpack:main Apr 2, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix duplicate body event listeners by moving logic from render to lifecycle methods

2 participants