fix: style refcounting bugs and render-phase leak under React 18+/19#218
Merged
dazlious merged 4 commits intoJun 5, 2026
Merged
Conversation
- make the returned remove function idempotent so double invocation cannot steal references held by other components - delete refcount keys at zero so counts can never go negative, which silently swallowed the next insert of the same id - preserve the reference count on replace (HMR) instead of resetting it to 1, which removed styles still in use on the next unmount - use prototype-less objects for the refcount/dupe maps - drop dead IE8/IE9 fallbacks (styleSheet.cssText, btoa guard)
Calling insertCss in the constructor is a render-phase side effect: React 18+/19 may invoke the constructor without ever mounting the instance (StrictMode double-invocation, discarded concurrent renders), incrementing the style reference count with no matching decrement. Orphaned <style> elements then accumulate in long-lived SPAs. Client-side insertion now happens in componentDidMount (still before paint, so no FOUC); the render-phase call is kept on the server only, where it is required for critical CSS collection.
The layout effect closed over the context value with an empty dependency array, so a changed StyleContext provider value would never re-insert styles and cleanup would remove the wrong ones.
…l options - README: webpack 5 and css-loader esModule:false requirements, getCss serialization caveat, v6 migration notes (no static hoisting, no prop-types) - build: remove corejs/useBuiltIns from preset-env; without a core-js entry import they had no effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #217. Fixes three reference-counting/lifecycle bugs found while reviewing the style insertion code, plus small docs/build cleanups.
withStyles: render-phase side effect leaked styles (React 18+/19)insertCsswas called in the constructor. React 18+/19 may invoke the constructor without ever mounting the instance (StrictMode double-invocation, discarded concurrent renders), incrementing the style reference count with no matching decrement — orphaned<style>elements accumulate in long-lived SPAs. Client-side insertion now happens incomponentDidMount(still before paint, so no FOUC); the render-phase call is kept on the server only, where it is required for critical CSS collection.The new StrictMode regression test fails against the previous implementation.
insertCss: refcount corruptionreplace: true(used by HMR) no longer resets the refcount to 1 while multiple components still reference the style — the first unmount after a hot update removed styles still in use.useStyles: stale closureThe layout effect closed over the context value with an empty dependency array;
insertCssis now a dependency.Misc
css-loaderesModule: falserequirements,getCssserialization caveat, v6 migration notescorejs/useBuiltInspreset-env optionstoBeNullassertionTest plan
node tools/test— 14/14 (4 new regression tests)node tools/lint— cleannode tools/build— all dist bundles compile🤖 Generated with Claude Code