[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)

Author: stuaylwardCreated Aug 6, 2026Updated Sep 4, 2026

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 useDebugValue after the cache if/else block in useStyledComponentImpl so every render emits the same hook sequence regardless of cache state."

Steps to reproduce

  1. Application using @mui/styled-engine-sc + @mui/x-data-grid + React 19
  2. Pin styled-components to 6.3.12 — works fine
  3. Upgrade to any 6.4.x or 6.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