Skip to content

fix(ScrollControls): cache ReactDOM root for React 19 compatibility #2557

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
iamadagostino wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix(ScrollControls): cache ReactDOM root for React 19 compatibility #2557

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
493e8c3
fix(ScrollControls): cache ReactDOM root for React 19 compatibility
iamadagostino Oct 13, 2025
ae411a6
refactor(ScrollControls): use proper HTMLDivElementWithR3Root type in…
iamadagostino Oct 23, 2025
bb9316c
Merge branch 'master' into master
iamadagostino Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion src/web/ScrollControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import { DomEvent } from '@react-three/fiber/dist/declarations/src/core/events'
import { easing } from 'maath'
import { ForwardRefComponent } from '../helpers/ts-utils'

type HTMLDivElementWithR3Root = HTMLDivElement & {
__r3_root?: ReactDOM.Root
}

export type ScrollControlsProps = {
/** Precision, default 0.00001 */
eps?: number
Expand Down Expand Up @@ -236,7 +240,33 @@ const ScrollHtml: ForwardRefComponent<{ children?: React.ReactNode; style?: Reac
React.useImperativeHandle(ref, () => group.current, [])
const { width, height } = useThree((state) => state.size)
Copy link

@artokun artokun Oct 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you update useThree types to include state.fixed and tag me for review again?

Copy link
Author

@iamadagostino iamadagostino Oct 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • The state variable used in the root caching logic (lines 245-264) comes from useScroll() on line 234, which returns ScrollControlsState (already typed with fixed: HTMLDivElement on line 37).
  • This useThree() call only extracts size for layout calculations and is unrelated to the state.fixed property being accessed below.

Copy link

@artokun artokun Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See R247

const fiberState = React.useContext(fiberContext)
const root = React.useMemo(() => ReactDOM.createRoot(state.fixed), [state.fixed])
// Cache a root instance on the fixed DOM element to avoid calling
// ReactDOM.createRoot multiple times on the same container which
// triggers an error in React 19. We store the created root in a
// non-enumerable property on the element so repeated mounts or
// remounts re-use the same root instance.
const root = React.useMemo(() => {
try {
// If a root was previously created on this element, reuse it.
const fixedWithRoot = state.fixed as HTMLDivElementWithR3Root
if (fixedWithRoot && fixedWithRoot.__r3_root) return fixedWithRoot.__r3_root
const r = ReactDOM.createRoot(state.fixed)
try {
Object.defineProperty(fixedWithRoot, '__r3_root', {
value: r,
configurable: true,
writable: false,
})
} catch (e) {
// ignore if we can't define property (very unlikely)
fixedWithRoot.__r3_root = r
}
return r
} catch (e) {
// Fallback: if createRoot fails for any reason, rethrow so devs see it.
throw e
}
}, [state.fixed])
useFrame(() => {
if (state.delta > state.eps) {
group.current.style.transform = `translate3d(${
Expand Down