fix(react/runtime): fix `MainThreadRef` modification failure in certain cases by Yradex · Pull Request #1884 · lynx-family/lynx-stack

Yradex · 2025-10-13T06:27:34Z

Summary by CodeRabbit

Bug Fixes
- Fixed an issue where main-thread functions created during initial render couldn’t update MainThreadRef after hydration, improving ref reliability across hydration flows.
Tests
- Updated assertions and snapshots to align with the refined hydrated ref structure; no behavioral changes.
Chores
- Added a changeset entry to publish a patch release of @lynx-js/react documenting the fix.

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

…in cases

changeset-bot · 2025-10-13T06:27:38Z

🦋 Changeset detected

Latest commit: 71d82b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@lynx-js/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2025-10-13T06:27:46Z

📝 Walkthrough

Walkthrough

Updates tests to reflect structured ref shapes during hydration, refactors hydrateMainThreadRef to store full WorkletRefImpl objects directly in the map and narrows its parameter type, and adds a changeset entry documenting a patch fix. No public API changes.

Changes

Cohort / File(s)	Summary of changes
Hydration logic `packages/react/worklet-runtime/src/hydrate.ts`	Narrowed hydrateMainThreadRef parameter to WorkletRefImpl only; now assigns full WorkletRefImpl into _workletRefMap instead of mutating { current }.
Worklet ref tests `packages/react/worklet-runtime/__test__/workletRef.test.js`	Updated assertions to expect object-shaped refs post-hydration; reformatted expects; adjusted inputs to match new ref structures; logic flow unchanged.
Release metadata `.changeset/tall-symbols-drive.md`	Added changeset for @lynx-js/react patch describing bug fix about main-thread functions modifying MainThreadRef after hydration.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

fix(react/runtime): fix runOnBackground() failure in certain cases #1878 — Also modifies hydrateMainThreadRef in packages/react/worklet-runtime/src/hydrate.ts, suggesting overlapping ref hydration behavior.

Suggested labels

framework:React

Suggested reviewers

hzy
colinaaa

Poem

I hop through refs with careful tread,
From strings to shapes, the map now fed.
Hydration pools, a settled stream,
The main thread’s touch—no longer a dream.
Patch-sized carrot, crisp and bright,
I nibble bugs—then bound to light. 🥕🐇

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly and concisely describes the bug being addressed—MainThreadRef modification failures in the react/runtime package—and matches the core change in the pull request, which refines the hydration logic to fix that issue. It specifies the affected area and the nature of the fix without unnecessary detail. This makes it immediately clear to reviewers and future readers what the primary change is.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e42b906 and 71d82b0.

📒 Files selected for processing (3)

.changeset/tall-symbols-drive.md (1 hunks)
packages/react/worklet-runtime/__test__/workletRef.test.js (7 hunks)
packages/react/worklet-runtime/src/hydrate.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

.changeset/*.md

📄 CodeRabbit inference engine (AGENTS.md)

For contributions, generate and commit a Changeset describing your changes

Files:

.changeset/tall-symbols-drive.md

🧬 Code graph analysis (2)

packages/react/worklet-runtime/__test__/workletRef.test.js (2)

packages/react/worklet-runtime/src/workletRef.ts (2)

getFromWorkletRefMap (111-111)

updateWorkletRefInitValueChanges (113-113)

packages/react/worklet-runtime/src/bindings/bindings.ts (1)

updateWorkletRefInitValueChanges (78-78)

packages/react/worklet-runtime/src/hydrate.ts (1)

packages/react/worklet-runtime/src/bindings/types.ts (1)

WorkletRefImpl (11-17)

🔇 Additional comments (4)

.changeset/tall-symbols-drive.md (1)

1-5: LGTM! Changeset correctly documents the fix.

The changeset properly describes the patch-level bug fix for MainThreadRef modification issues after hydration, following the required format.

As per coding guidelines

packages/react/worklet-runtime/src/hydrate.ts (1)

70-79: Solid fix for the hydration issue.

The refactoring correctly addresses the MainThreadRef modification bug by:

Narrowing the parameter type to WorkletRefImpl<unknown> for better type safety

Replacing the entire ref object in the map (line 78) instead of attempting to mutate nested properties, ensuring consistent structure post-hydration

Preserving the early return for unaccessed refs (line 74-76)

The double cast at line 45 (as unknown as WorkletRefImpl<unknown>) is necessary given the dynamic typing of ClosureValueType and is safe within this context, as the logic ensures firstScreenCtxObj represents a ref object when _wvid is encountered.

packages/react/worklet-runtime/__test__/workletRef.test.js (2)

57-59: LGTM! Test updates align with implementation changes.

The formatting improvements enhance readability by wrapping long assertion chains and array initializations across multiple lines. All test logic remains intact while expectations now correctly validate the updated ref structure.

Also applies to: 123-124, 145-159, 189-190, 246-249, 251-256, 312-315, 317-322

160-186: Snapshot correctly reflects hydrated ref structure.

The updated inline snapshot now shows the full Element wrapper object structure (lines 177-179) instead of plain string values, accurately representing how refs are stored in the _workletRefMap after the hydration fix. This validates that the refactored hydration logic preserves the complete WorkletRefImpl structure.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2025-10-13T06:31:55Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

relativeci · 2025-10-13T06:40:49Z

Web Explorer

#5881 Bundle Size — 364.58KiB (0%).

71d82b0(current) vs e42b906 main#5880(baseline)

Bundle metrics

1 change

	Current #5881	Baseline #5880
Initial JS	`144.53KiB`	`144.53KiB`
Initial CSS	`32.11KiB`	`32.11KiB`
Cache Invalidation	`0%`	`48.44%`
Chunks	`8`	`8`
Assets	`8`	`8`
Modules	`219`(`-0.45%`)	`220`
Duplicate Modules	`16`	`16`
Duplicate Code	`3.23%`	`3.23%`
Packages	`4`	`4`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #5881	Baseline #5880
JS	`238.67KiB`	`238.67KiB`
Other	`93.8KiB`	`93.8KiB`
CSS	`32.11KiB`	`32.11KiB`

Bundle analysis report Branch Yradex:mts/fix-hydration Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2025-10-13T06:40:50Z

React Example

#5885 Bundle Size — 237.56KiB (0%).

71d82b0(current) vs e42b906 main#5884(baseline)

Bundle metrics no changes

	Current #5885	Baseline #5884
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`166`	`166`
Duplicate Modules	`68`	`68`
Duplicate Code	`46.82%`	`46.82%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #5885	Baseline #5884
IMG	`145.76KiB`	`145.76KiB`
Other	`91.8KiB`	`91.8KiB`

Bundle analysis report Branch Yradex:mts/fix-hydration Project dashboard

^{Generated by RelativeCI Documentation Report issue}

codspeed-hq · 2025-10-13T06:43:20Z

CodSpeed Performance Report

Merging #1884 will improve performances by 12.2%

_{Comparing Yradex:mts/fix-hydration (71d82b0) with main (e42b906)}

Summary

⚡ 2 improvements
✅ 51 untouched
⏩ 3 skipped¹

Benchmarks breakdown

	Benchmark	`BASE`	`HEAD`	Change
⚡	`transform 1000 view elements`	45 ms	40.1 ms	+12.2%
⚡	`basic-performance-div-100`	6.6 ms	6.2 ms	+7.54%

3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/react@0.114.3 ### Patch Changes - Initialize `ctxNotFoundEventListener` before each test in testing library ([#1888](#1888)) - fix: main thread functions created during the initial render cannot correctly modify `MainThreadRef`s after hydration ([#1884](#1884)) ## @lynx-js/rspeedy@0.11.7 ### Patch Changes - Bump Rsbuild v1.5.17. ([#1889](#1889)) - feat: support web preview in rspeedy dev ([#1893](#1893)) - support web preview in rspeedy dev (experimental) - Updated dependencies \[]: - @lynx-js/web-rsbuild-server-middleware@0.18.1 ## @lynx-js/web-constants@0.18.1 ### Patch Changes - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.18.1 ## @lynx-js/web-core@0.18.1 ### Patch Changes - fix: mts freeze after reload() ([#1892](#1892)) The mts may be freezed after reload() called. We fixed it by waiting until the all-on-ui Javascript realm implementation, an iframe, to be fully loaded. - Updated dependencies \[[`70a18fc`](70a18fc)]: - @lynx-js/web-mainthread-apis@0.18.1 - @lynx-js/web-worker-runtime@0.18.1 - @lynx-js/web-constants@0.18.1 - @lynx-js/web-worker-rpc@0.18.1 ## @lynx-js/web-elements@0.8.9 ### Patch Changes - fix: layoutchange event result `detail.top` and `detail.left` was `0` incorrectly ([#1887](#1887)) - textarea placeholder inherits font-size by default ([#1874](#1874)) - feat: support <x-text text="content"></x-text> ([#1881](#1881)) - Updated dependencies \[]: - @lynx-js/web-elements-template@0.8.9 ## @lynx-js/web-mainthread-apis@0.18.1 ### Patch Changes - fix: mts freeze after reload() ([#1892](#1892)) The mts may be freezed after reload() called. We fixed it by waiting until the all-on-ui Javascript realm implementation, an iframe, to be fully loaded. - Updated dependencies \[]: - @lynx-js/web-constants@0.18.1 - @lynx-js/web-style-transformer@0.18.1 ## @lynx-js/web-worker-runtime@0.18.1 ### Patch Changes - Updated dependencies \[[`70a18fc`](70a18fc)]: - @lynx-js/web-mainthread-apis@0.18.1 - @lynx-js/web-constants@0.18.1 - @lynx-js/web-worker-rpc@0.18.1 ## create-rspeedy@0.11.7 ## upgrade-rspeedy@0.11.7 ## @lynx-js/web-core-server@0.18.1 ## @lynx-js/web-elements-template@0.8.9 ## @lynx-js/web-rsbuild-server-middleware@0.18.1 ## @lynx-js/web-style-transformer@0.18.1 ## @lynx-js/web-worker-rpc@0.18.1 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

fix(react/runtime): fix MainThreadRef modification failure in certa…

71d82b0

…in cases

Yradex requested a review from hzy as a code owner October 13, 2025 06:27

coderabbitai bot added the framework:React label Oct 13, 2025

Yradex enabled auto-merge (squash) October 13, 2025 11:12

hzy approved these changes Oct 16, 2025

View reviewed changes

Yradex merged commit 7570a5e into lynx-family:main Oct 16, 2025
51 checks passed

Yradex deleted the mts/fix-hydration branch October 16, 2025 07:44

github-actions bot mentioned this pull request Oct 16, 2025

chore: Release 2025-10-23 07:14:56 #1883

Merged

coderabbitai bot mentioned this pull request Jan 27, 2026

feat: add MainThreadValue #2144

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(react/runtime): fix `MainThreadRef` modification failure in certain cases#1884

fix(react/runtime): fix `MainThreadRef` modification failure in certain cases#1884
Yradex merged 1 commit intolynx-family:mainfrom
Yradex:mts/fix-hydration

Yradex commented Oct 13, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Oct 13, 2025

Uh oh!

coderabbitai bot commented Oct 13, 2025 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Uh oh!

codecov bot commented Oct 13, 2025

Uh oh!

relativeci bot commented Oct 13, 2025

Uh oh!

relativeci bot commented Oct 13, 2025

Uh oh!

codspeed-hq bot commented Oct 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Yradex commented Oct 13, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

changeset-bot bot commented Oct 13, 2025

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

codecov bot commented Oct 13, 2025

Codecov Report

Uh oh!

relativeci bot commented Oct 13, 2025

Web Explorer

#5881 Bundle Size — 364.58KiB (0%).

Uh oh!

relativeci bot commented Oct 13, 2025

React Example

#5885 Bundle Size — 237.56KiB (0%).

Uh oh!

codspeed-hq bot commented Oct 13, 2025

CodSpeed Performance Report

Merging #1884 will improve performances by 12.2%

Summary

Benchmarks breakdown

Footnotes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Yradex commented Oct 13, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 13, 2025 •

edited

Loading