[Fiber] Ensure `useEffectEvent` reads latest values in `forwardRef` and `memo()` Components by eps1lon · Pull Request #34831 · react/react

eps1lon · 2025-10-13T08:04:04Z

Seems to me the event payload handling should've gone into the original fallthrough block instead of just handling it for FunctionComponent: https://github.com/facebook/react/pull/25229/files#diff-9e8ee221dbf99e0ccdad6a63bf63804dea26f1785e2f443dbe92fa835a63b83eL412-L415

See first commit for current behavior where Effect Events did not read the latest Context value if used in React.memo Components.

…memo()` Components

eps1lon · 2025-10-13T08:05:39Z

+        logContextValue = fireLogContextValue;
+      }, []);


The original report registered an interval here. Even after rendering with a new context value, the interval continued to log the initial value.

react-sizebot · 2025-10-13T08:07:42Z

Comparing: 1d68bce...6bec011

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	=	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	605.42 kB	604.97 kB	=	107.21 kB	107.14 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	664.39 kB	663.94 kB	=	117.09 kB	117.03 kB
facebook-www/ReactDOM-prod.classic.js	=	688.26 kB	687.80 kB	=	121.13 kB	121.07 kB
facebook-www/ReactDOM-prod.modern.js	=	678.69 kB	678.22 kB	=	119.48 kB	119.42 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 6bec011

…nd `memo()` Components (#34831) DiffTrain build for [93d4458](93d4458)

[diff react/react@ead92181...d7215b49](react/react@ead9218...d7215b4) <details> <summary>React upstream changes</summary> - react/react#34829 - react/react#34827 - react/react#34824 - react/react#34823 - react/react#34831 - react/react#34821 </details>

…nd `memo()` Components (react#34831)

React 19.2's native useEffectEvent never updates past first-render values when the calling component is wrapped in forwardRef or memo (react/react#34818) — the commit phase only applies effect-event updates to plain function-component fibers. DialogCard and Tooltip are forwardRef components, so Escape handling read a stale isTopLayer and one Escape cascade-closed every nested dialog. Keep the use-effect-event dependency removed, but route the three call sites through a small internal shim (useRef + useInsertionEffect) until react/react#34831 ships in a stable release. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com>

…ss contract (#2506) * feat!: use React's native useEffectEvent Remove the use-effect-event dependency in favor of React's built-in useEffectEvent, and raise the react/react-dom peer dependency minimum to ^19.2. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix: route useEffectEvent through an internal shim React 19.2's native useEffectEvent never updates past first-render values when the calling component is wrapped in forwardRef or memo (react/react#34818) — the commit phase only applies effect-event updates to plain function-component fibers. DialogCard and Tooltip are forwardRef components, so Escape handling read a stale isTopLayer and one Escape cascade-closed every nested dialog. Keep the use-effect-event dependency removed, but route the three call sites through a small internal shim (useRef + useInsertionEffect) until react/react#34831 ships in a stable release. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix: lint errors in useEffectEvent test, update changeset Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * docs: update changeset for internal effect-event shim Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * revert: keep use-effect-event, native useEffectEvent unusable in forwardRef/memo Audit of all call sites: useGlobalKeyDown and useClickOutsideEvent are public hooks that execute in the caller's fiber (all internal callers — DialogCard, Menu, Breadcrumbs — are forwardRef components, and external callers can be anything), and Tooltip is a forwardRef component. React 19.2's native useEffectEvent never updates past first-render values in forwardRef/memo fibers (react/react#34818), so no site can use the native hook until the fix ships in a stable release. Restore the use-effect-event dependency at all three sites with TODO comments, drop the internal shim, and add a regression test that pins the fresh-values contract for forwardRef/memo callers. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * chore: restore lockfile to match next Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com>

* chore: enter changesets prerelease mode on next Enter the `next` prerelease tag, point Changesets and CI/release workflows at the `next` branch, and add a sample major changeset for @sanity/ui so the Version Packages bot can open the first pre-release. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * Version Packages (next) (#2504) Co-authored-by: squiggler-app[bot] <265501495+squiggler-app[bot]@users.noreply.github.com> * feat(ui): tombstone deprecated props, hooks, and components (major) (#2509) * chore(ui): tombstone remaining deprecated props as never Remove runtime fallbacks for deprecated space, grid, MenuButton popover, Popover boundaryElement, Badge mode, and Avatar tone props. Defaults move onto their replacements (gap, gridTemplate*, popover). Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix(storybook): migrate deprecated space/columns/useElementRect props Replace Stack/Inline/Menu/Tree/TabList/Button `space` with `gap`, Grid `columns`/`rows` with `gridTemplateColumns`/`gridTemplateRows`, and `useElementRect` with `useElementSize` (border size). Drop matching no-deprecated suppressions; leave theme/_compat suppressions alone. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * feat(ui): tombstone deprecated APIs with never types (major) Finish call-site migrations, add throwing-hook tests, and a major changeset documenting removed props/hooks/components and their replacements. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * revert(ui): keep PortalProvider boundaryElement for PortalContext PortalProvider.boundaryElement still writes PortalContextValue, so it cannot be tombstoned like other deprecated props. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * chore: drop PortalProvider from tombstone changeset notes Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * Version Packages (next) (#2512) Co-authored-by: squiggler-app[bot] <265501495+squiggler-app[bot]@users.noreply.github.com> * feat: React 19 compiler target and ^19.2 peer deps (#2507) * feat: target React 19 compiler and require react ^19.2 Compile @sanity/ui and @sanity/themer with reactCompiler target '19', drop the now-unnecessary react-compiler-runtime dependency, and tighten react (and react-dom for ui) peer ranges to ^19.2 across published packages. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * chore: mark @sanity/themer bump as major in changeset Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * revert: leave @sanity/icons and @sanity/logos peer ranges unchanged Only @sanity/ui and @sanity/themer need the React 19.2 peer bump for the compiler target change. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * feat(ui): remove private `_visual-editing` entrypoint (#2513) * feat(ui): remove private `_visual-editing` entrypoint Drop `@sanity/ui/_visual-editing` now that tree-shaking from the main export is sufficient for visual-editing consumers. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * chore: stop deep-linking workspace packages into transitive deps Set linkWorkspacePackages to true (not deep) so sanity and @sanity/visual-editing keep registry @sanity/ui until those packages are updated for the removed _visual-editing entrypoint. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix(ui): restore Popover max-width after boundaryElement migration (#2514) fix(ui): restore Popover max-width from floatingBoundary After tombstoning `boundaryElement`, max-width only came from BoundaryElementProvider, so migrating to floatingBoundary/referenceBoundary alone dropped constrainSize/preventOverflow width. Fall back to the floating boundary for size, and wrap the Aligned story in BoundaryElementProvider. Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * Version Packages (next) (#2515) Co-authored-by: squiggler-app[bot] <265501495+squiggler-app[bot]@users.noreply.github.com> * feat!: drop CommonJS from @sanity/ui, require Node.js >=22.12 (#2510) * feat!: ship ESM only and require Node.js >=22.12 Drop CommonJS build outputs and `require` export conditions from @sanity/ui, @sanity/color, and @sanity/logos. Raise published package engines to >=22.12 to match sanity. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * revert: leave color, logos, and icons unchanged Scope the ESM-only / engines bump to @sanity/ui and @sanity/themer only. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * refactor(ui): drop custom chunkFileNames, use tsdown defaults Hashed shared-chunk filenames already prevent the entry/chunk collision that dist/_chunks/ was guarding against (#2262). Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * refactor(ui): restore UserConfig annotation on tsdown config Match themer/logos so the inferred config type stays portable in the package TypeScript program (TS2883). Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * Version Packages (next) (#2516) Co-authored-by: squiggler-app[bot] <265501495+squiggler-app[bot]@users.noreply.github.com> * fix: revert @sanity/themer to last published prerelease * Revert "fix: revert @sanity/themer to last published prerelease" This reverts commit e325e53. * feat: replace AnimatePresence with AnimateActivity (#2508) * feat: replace AnimatePresence with AnimateActivity Vendor Motion's AnimateActivity (Activity + exit animations) and use it in Tooltip, Popover, and Toast. Requires React 19.2 (handled separately). Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix: keep AnimateActivityProps module-private for knip Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix: keep AnimatePresence for ToastProvider Toasts are mount/unmount list items; AnimatePresence fits that better than Activity-based show/hide. AnimateActivity stays for Tooltip/Popover. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix: lazy-mount AnimateActivity until first open Keep tooltips/popovers out of the DOM until first shown so hidden Activity nodes do not leak duplicate text into Testing Library queries (e.g. delay-group stories). After first open, Activity still preserves exit animations and state on subsequent hides. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix: drop lazy-mount ref, assert tooltip visibility in stories Hidden Activity content is intentionally pre-rendered in the DOM, so the tooltip stories wait for visibility instead of text presence. Flipping animate off while open skips the exit animation, which is acceptable. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix: await async expect in tooltip story play functions Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * feat: keep closed tooltips/popovers mounted with Activity Wrap the animate=false paths in plain <Activity> instead of unmounting, so open/close preserves state in both modes. Reset the menu's active item via effect cleanup (Activity unmounts effects on hide) so shouldFocus and selected registration behave like a fresh mount on reopen. Update tooltip/menu tests to assert visibility rather than DOM presence, and gate the Recursive popover story's content on open since hidden activities pre-render (an unconditional recursive content would render an infinitely deep hidden tree). Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * chore: document why native useEffectEvent is blocked, pin the freshness contract (#2506) * feat!: use React's native useEffectEvent Remove the use-effect-event dependency in favor of React's built-in useEffectEvent, and raise the react/react-dom peer dependency minimum to ^19.2. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix: route useEffectEvent through an internal shim React 19.2's native useEffectEvent never updates past first-render values when the calling component is wrapped in forwardRef or memo (react/react#34818) — the commit phase only applies effect-event updates to plain function-component fibers. DialogCard and Tooltip are forwardRef components, so Escape handling read a stale isTopLayer and one Escape cascade-closed every nested dialog. Keep the use-effect-event dependency removed, but route the three call sites through a small internal shim (useRef + useInsertionEffect) until react/react#34831 ships in a stable release. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * fix: lint errors in useEffectEvent test, update changeset Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * docs: update changeset for internal effect-event shim Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * revert: keep use-effect-event, native useEffectEvent unusable in forwardRef/memo Audit of all call sites: useGlobalKeyDown and useClickOutsideEvent are public hooks that execute in the caller's fiber (all internal callers — DialogCard, Menu, Breadcrumbs — are forwardRef components, and external callers can be anything), and Tooltip is a forwardRef component. React 19.2's native useEffectEvent never updates past first-render values in forwardRef/memo fibers (react/react#34818), so no site can use the native hook until the fix ships in a stable release. Restore the use-effect-event dependency at all three sites with TODO comments, drop the internal shim, and add a regression test that pins the fresh-values contract for forwardRef/memo callers. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * chore: restore lockfile to match next Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * feat(ui)!: drop @juggle/resize-observer, use native ResizeObserver (#2518) * fix(ui): drop @juggle/resize-observer, use native ResizeObserver ResizeObserver is available in all browsers Sanity UI targets, so the polyfill and its custom typings are no longer needed. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * refactor(ui): remove _ResizeObserver wrapper, use native ResizeObserver directly Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * feat: ban forwardRef, createRef, createElement, Component, PureComponent with oxlint (#2519) feat: ban forwardRef, createRef, createElement, Component, PureComponent via oxlint Adds react entries to eslint/no-restricted-imports in .oxlintrc.json and migrates every @sanity/ui component from forwardRef to React 19 ref-as-prop function components. @sanity/icons and @sanity/logos keep forwardRef through a scoped override since their react peer ranges still include React 18, where refs only attach to forwardRef-wrapped function components. The class ErrorBoundary keeps an inline disable (error boundaries have no function equivalent), and the useGlobalKeyDown freshness-contract test keeps its deliberate forwardRef usage with an inline disable. Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * chore(deps): update renovatebot/github-action action to v46.2.0 (next) (#2521) * Version Packages (next) (#2517) * feat(ui): move heavy-dependency components to dedicated subpath entry points (#2522) * feat(ui): extract static CSS with vanilla-extract into @sanity/ui/styles.css (#2523) Sets up the vanilla-extract build pipeline in @sanity/ui via @sanity/tsdown-config's vanillaExtract option, with inject disabled so the stylesheet is never self-imported: consumers add `import '@sanity/ui/styles.css'` themselves, on the same export path the vanilla-extract based next major already uses. Migrates the first slice of fully static styled-components CSS (SrOnly, Spinner, SpanWithTextOverflow) to colocated .css.ts modules, and wires .css.ts compilation into every consumer of the package's TypeScript source: storybook, the icons app, the ui/themer vitest configs, the docs studio (sanity dev/build), and the docs Next app (Turbopack, via @vanilla-extract/next-plugin). Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * chore: ban class components via react/prefer-function-component Replace the no-restricted-imports ban on Component/PureComponent with react/prefer-function-component (allowErrorBoundary), so ErrorBoundary no longer needs an inline disable. Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> * Version Packages (next) (#2524) Co-authored-by: squiggler-app[bot] <265501495+squiggler-app[bot]@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Cody Olsen <stipsan@users.noreply.github.com> Co-authored-by: squiggler-app[bot] <265501495+squiggler-app[bot]@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>