[6.4.x / 6.5.0] Rules of Hooks violation in dev mode when styled component re-renders with unchanged style props (regression from 6.4.0)
Description
Upgrading from 6.3.12 to any 6.4.x or 6.5.0 release causes a fatal React crash in development mode when a MUI DataGrid component mounts in an application using @mui/styled-engine-sc.
The error does not occur on 6.3.12, and does not crash production builds (see root cause below).
Error
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
at finishRenderingHooks (react-dom-client.development.js:7717)
at renderWithHooks (react-dom-client.development.js:7684)
at updateForwardRef (react-dom-client.development.js:9724)The component at the top of the React error boundary is <MuiDataGridRoot> → GridRoot (a styled component created internally by MUI via @mui/styled-engine-sc).
Root cause
The 6.4.0 release introduced a render-cache optimisation that skips useInjectedStyle() on cache-hit re-renders. Prior to 6.4.0, React.useDebugValue(generatedClassName) lived unconditionally in the render path. After 6.4.0 it was moved inside useInjectedStyle, meaning it is only called on a cache miss - and silently skipped on a cache-hit re-render.
React requires the same number of hooks to be called on every render. When MUI DataGrid's GridRoot triggers an immediate re-render with unchanged style props on mount, the first render calls useDebugValue (cache miss) but the second does not (cache hit), causing React to crash.
This was fixed in the v7 prerelease in PR #5761 (https://github.com/styled-components/styled-components/pull/5761), commit ac6b11c (https://github.com/styled-components/styled-components/commit/ac6b11c64fbd55cffccdf5d7ff0f701736db5924):
"Move
useDebugValueafter the cache if/else block inuseStyledComponentImplso every render emits the same hook sequence regardless of cache state."
Steps to reproduce
- Application using
@mui/styled-engine-sc+@mui/x-data-grid+ React 19 - Pin
styled-componentsto6.3.12— works fine - Upgrade to any
6.4.xor6.5.0— crash on DataGrid mount in dev mode
Environment
| Package | Version |
|---|---|
styled-components |
6.4.4 (broken), 6.3.12 (works) |
@mui/styled-engine-sc |
9.3.0 |
@mui/x-data-grid |
MUI v7 |
react |
19.2.8 |
Request
The fix is a one-line move of useDebugValue outside the cache branch - already merged into the v7 prerelease.
Please backport to a 6.5.x patch release, as v7 is not yet stable and this blocks all 6.4.x+ upgrades for projects using @mui/styled-engine-sc.
Source: styled-components/styled-components