refactor: create element without ref for suspense in main thread by HuJean · Pull Request #2426 · lynx-family/lynx-stack

HuJean · 2026-04-07T03:03:34Z

Summary by CodeRabbit

Bug Fixes
- Updated Suspense component to optimize element reference handling on the main thread.

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

changeset-bot · 2026-04-07T03:03:41Z

🦋 Changeset detected

Latest commit: 1faef9f

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

This PR includes changesets to release 2 packages

Name	Type
@lynx-js/react	Patch
@lynx-js/react-umd	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 · 2026-04-07T03:03:48Z

📝 Walkthrough

Walkthrough

This PR introduces a patch-level change to the @lynx-js/react package that makes the Suspense component conditionally handle the ref prop based on the __MAIN_THREAD__ flag. When running on the main thread, the ref prop is omitted from the wrapper VNode; on background threads, the ref is preserved for tracking element state.

Changes

Cohort / File(s)	Summary
Changeset `.changeset/legal-zebras-sit.md`	New changelog entry documenting patch-level behavior change for Suspense ref handling on main thread.
Suspense Implementation `packages/react/runtime/src/lynx/suspense.ts`	Modified ref prop assignment to be conditional on `__MAIN_THREAD__` flag for both children and fallback wrapper VNodes, suppressing ref callbacks when running on main thread.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

feat(react/runtime): support using a host element as direct child of Suspense #1455: Modifies Suspense ref and wrapper handling in the same file with related threading logic.
Revert "feat(react/runtime): support using a host element as direct child of Suspense" #1450: Affects Suspense wrapper/ref behavior and interacts with threading considerations in the same component.
feat(react/runtime): support using a host element as direct child of Suspense #1308: Touches the same Suspense ref handling logic with __MAIN_THREAD__ conditional behavior.

Suggested labels

framework:React

Suggested reviewers

Yradex
hzy

Poem

🐰 A rabbit threads through the main and background lanes,
Conditionally dropping refs like rain on the plains,
Suspense now knows where to hold on tight,
And when to let go—what a beautiful sight! 🌿

🚥 Pre-merge checks | ✅ 3

✅ 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 accurately summarizes the main change: conditionally omitting the ref prop when creating Suspense elements on the main thread, which is the core modification across both the changeset and the implementation file.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch p/suspense-mainthread

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 · 2026-04-07T03:06:02Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

coderabbitai

🧹 Nitpick comments (1)

packages/react/runtime/src/lynx/suspense.ts (1)

21-47: Please add regression tests for thread-gated Suspense wrapper refs.

Given the split behavior between main/background threads, add targeted tests to lock this contract and prevent ref-related regressions in future refactors.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/react/runtime/src/lynx/suspense.ts` around lines 21 - 47, Add
regression tests that assert the thread-gated ref contract around the Suspense
wrapper implemented via __createElement: when __MAIN_THREAD__ is false the
wrapper should attach refs (verify childrenRef.current becomes a
BackgroundSnapshotInstance after rendering and that
globalBackgroundSnapshotInstancesToRemove is updated/cleared when newFallback's
ref runs), and when __MAIN_THREAD__ is true no ref callbacks should be invoked.
Create tests that toggle __MAIN_THREAD__, render the Suspense wrapper that uses
newChildren and newFallback (or import the Suspense wrapper behavior), simulate
mounting of children then fallback to trigger the ref callbacks, and assert
childrenRef mutations and globalBackgroundSnapshotInstancesToRemove changes to
lock this behavior against regressions.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/react/runtime/src/lynx/suspense.ts`:
- Around line 21-47: Add regression tests that assert the thread-gated ref
contract around the Suspense wrapper implemented via __createElement: when
__MAIN_THREAD__ is false the wrapper should attach refs (verify
childrenRef.current becomes a BackgroundSnapshotInstance after rendering and
that globalBackgroundSnapshotInstancesToRemove is updated/cleared when
newFallback's ref runs), and when __MAIN_THREAD__ is true no ref callbacks
should be invoked. Create tests that toggle __MAIN_THREAD__, render the Suspense
wrapper that uses newChildren and newFallback (or import the Suspense wrapper
behavior), simulate mounting of children then fallback to trigger the ref
callbacks, and assert childrenRef mutations and
globalBackgroundSnapshotInstancesToRemove changes to lock this behavior against
regressions.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a2a4c4f8-61c3-4962-ab57-a9972058c943

📥 Commits

Reviewing files that changed from the base of the PR and between 55602e2 and 8e504f2.

📒 Files selected for processing (2)

.changeset/legal-zebras-sit.md
packages/react/runtime/src/lynx/suspense.ts

codspeed-hq · 2026-04-07T03:18:57Z

Merging this PR will improve performance by 17.23%

⚡ 1 improved benchmark
✅ 71 untouched benchmarks
⏩ 21 skipped benchmarks¹

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
⚡	`transform 1000 view elements`	47.3 ms	40.4 ms	+17.23%

_{Comparing p/suspense-mainthread (1faef9f) with main (a822afc)²}

21 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. ↩
No successful run was found on main (8c0e483) during the generation of this report, so a822afc was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

relativeci · 2026-04-07T03:22:13Z

React External

#213 Bundle Size — 591.38KiB (-0.02%).

1faef9f(current) vs a822afc main#212(baseline)

Bundle metrics

1 change

	Current #213	Baseline #212
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`31.04%`	`31.03%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`17`	`17`
Duplicate Modules	`5`	`5`
Duplicate Code	`8.59%`	`8.59%`
Packages	`0`	`0`
Duplicate Packages	`0`	`0`

Bundle size by type

1 change

1 improvement

	Current #213	Baseline #212
Other	`591.38KiB` (`-0.02%`)	`591.5KiB`

Bundle analysis report Branch p/suspense-mainthread Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-04-07T03:22:15Z

Web Explorer

#8669 Bundle Size — 728.84KiB (0%).

1faef9f(current) vs a822afc main#8668(baseline)

Bundle metrics no changes

	Current #8669	Baseline #8668
Initial JS	`43.31KiB`	`43.31KiB`
Initial CSS	`2.16KiB`	`2.16KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`8`	`8`
Assets	`10`	`10`
Modules	`149`	`149`
Duplicate Modules	`11`	`11`
Duplicate Code	`34.69%`	`34.69%`
Packages	`3`	`3`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #8669	Baseline #8668
Other	`384.62KiB`	`384.62KiB`
JS	`342.07KiB`	`342.07KiB`
CSS	`2.16KiB`	`2.16KiB`

Bundle analysis report Branch p/suspense-mainthread Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-04-07T03:22:15Z

React Example

#7094 Bundle Size — 237.68KiB (0%).

1faef9f(current) vs a822afc main#7093(baseline)

Bundle metrics no changes

	Current #7094	Baseline #7093
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`38.71%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`179`	`179`
Duplicate Modules	`70`	`70`
Duplicate Code	`46.12%`	`46.12%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #7094	Baseline #7093
IMG	`145.76KiB`	`145.76KiB`
Other	`91.92KiB`	`91.92KiB`

Bundle analysis report Branch p/suspense-mainthread Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-04-07T03:22:16Z

React MTF Example

#227 Bundle Size — 207.26KiB (0%).

1faef9f(current) vs a822afc main#226(baseline)

Bundle metrics

1 change

	Current #227	Baseline #226
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`46.36%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`173`	`173`
Duplicate Modules	`67`	`67`
Duplicate Code	`45.78%`(`-0.02%`)	`45.79%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #227	Baseline #226
IMG	`111.23KiB`	`111.23KiB`
Other	`96.03KiB`	`96.03KiB`

Bundle analysis report Branch p/suspense-mainthread Project dashboard

^{Generated by RelativeCI Documentation Report issue}

refactor: create element without ref for suspense in main thread

8e504f2

HuJean requested review from Yradex and hzy as code owners April 7, 2026 03:03

coderabbitai bot added the framework:React label Apr 7, 2026

coderabbitai bot reviewed Apr 7, 2026

View reviewed changes

Merge branch 'main' into p/suspense-mainthread

1faef9f

Yradex approved these changes Apr 7, 2026

View reviewed changes

HuJean enabled auto-merge (squash) April 7, 2026 06:12

HuJean merged commit 9d3e6e3 into main Apr 7, 2026
59 of 61 checks passed

HuJean deleted the p/suspense-mainthread branch April 7, 2026 06:30

github-actions bot mentioned this pull request Apr 7, 2026

chore: Release 2026-04-10 04:17:43 #2430

Open

Conversation

HuJean commented Apr 7, 2026 • 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 Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Apr 7, 2026 • 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

Uh oh!

codecov bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

codspeed-hq bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will improve performance by 17.23%

Performance Changes

Footnotes

Uh oh!

relativeci bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React External

#213 Bundle Size — 591.38KiB (-0.02%).

Uh oh!

relativeci bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#8669 Bundle Size — 728.84KiB (0%).

Uh oh!

relativeci bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#7094 Bundle Size — 237.68KiB (0%).

Uh oh!

relativeci bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#227 Bundle Size — 207.26KiB (0%).

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HuJean commented Apr 7, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Apr 7, 2026 •

edited

Loading

coderabbitai bot commented Apr 7, 2026 •

edited

Loading

codecov bot commented Apr 7, 2026 •

edited

Loading

codspeed-hq bot commented Apr 7, 2026 •

edited

Loading

relativeci bot commented Apr 7, 2026 •

edited

Loading

relativeci bot commented Apr 7, 2026 •

edited

Loading

relativeci bot commented Apr 7, 2026 •

edited

Loading

relativeci bot commented Apr 7, 2026 •

edited

Loading