Skip to content

Conversation

Yradex
Copy link
Collaborator

@Yradex Yradex commented Aug 20, 2025

Summary by CodeRabbit

  • Bug Fixes

    • Resolved a crash (“Cannot read properties of undefined”) in certain Suspense rendering/hydration scenarios, improving stability.
    • Ensures correct fallback display and final content after hydration in flows without an initial hydrate.
  • Chores

    • Applied a patch-level dependency update and added a changeset entry for release tracking.
  • Tests

    • Added a test validating Suspense behavior without initial hydrate, covering fallback-to-content transition and hydration-driven updates.

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

Copy link

changeset-bot bot commented Aug 20, 2025

🦋 Changeset detected

Latest commit: 5d8f582

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

Copy link
Contributor

coderabbitai bot commented Aug 20, 2025

📝 Walkthrough

Walkthrough

Introduces a changeset for a patch bump and bug note, adds a Suspense hydration test without initial hydrate, and guards snapshot patch emissions in reconstructInstanceTree with optional chaining to avoid undefined access when the patch collector is absent.

Changes

Cohort / File(s) Summary
Release metadata
/.changeset/rotten-queens-drum.md
Adds a patch changeset for @lynx-js/react noting a fix for an undefined property error with Suspense; no source code changes.
React runtime: Suspense test
/packages/react/runtime/__test__/lynx/suspense.test.jsx
Adds a test covering render-then-hydrate flow for Suspense, asserting fallback-to-content transition and hydration-driven updates without initial hydrate.
React runtime: snapshot guard
/packages/react/runtime/src/backgroundSnapshot.ts
Replaces non-null assertions with optional chaining on __globalSnapshotPatch.push calls in reconstructInstanceTree for CreateElement and InsertBefore operations.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested labels

framework:React

Suggested reviewers

  • hzy
  • colinaaa

Poem

Hop-hop! I tweak the patch at night,
Guarding pushes out of sight.
Suspense now naps, then wakes “foo” bright,
Hydrate arrives—alright, alright!
My paws leave trails in snapshot light. 🐇✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/react/runtime/src/backgroundSnapshot.ts (1)

520-522: for..in over possibly undefined extraProps can throw at runtime.

extraProps is typed as optional. Iterating with for..in when it’s undefined will throw (“Cannot convert undefined or null to object”). Guard it.

-    const extraProps = child.__extraProps;
-    for (const key in extraProps) {
-      child.setAttribute(key, extraProps[key]);
-    }
+    const extraProps = child.__extraProps;
+    if (extraProps) {
+      for (const key in extraProps) {
+        child.setAttribute(key, extraProps[key]);
+      }
+    }
🧹 Nitpick comments (2)
packages/react/runtime/__test__/lynx/suspense.test.jsx (1)

1696-1698: Rename test to reflect “no initial hydrate” (clarity).

“without hydrate” can be read as “no hydration at all”. Consider “without initial hydrate” to avoid ambiguity.

-it('should render fallback and content correctly without hydrate', async () => {
+it('should render fallback and content correctly without initial hydrate', async () => {
packages/react/runtime/src/backgroundSnapshot.ts (1)

510-526: Optional: add a DEV-only warning if reconstructInstanceTree runs without a collector.

When __globalSnapshotPatch is undefined, we silently skip patch emission. That’s intended in some flows (e.g., pre-hydration), but a DEV guard would help catch unintended suppression elsewhere.

 function reconstructInstanceTree(afters: BackgroundSnapshotInstance[], parentId: number, targetId?: number): void {
+  if (__DEV__ && !__globalSnapshotPatch) {
+    // This path is expected during specific phases (e.g., before hydration).
+    // If you see this during regular updates, investigate the patch lifecycle.
+    console.warn('[reconstructInstanceTree] __globalSnapshotPatch is undefined; patch emission suppressed.');
+  }
   for (const child of afters) {
     const id = child.__id;
     __globalSnapshotPatch?.push(SnapshotOperation.CreateElement, child.type, id);
     const values = child.__values;
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between f0d483c and 5d8f582.

📒 Files selected for processing (3)
  • .changeset/rotten-queens-drum.md (1 hunks)
  • packages/react/runtime/__test__/lynx/suspense.test.jsx (1 hunks)
  • packages/react/runtime/src/backgroundSnapshot.ts (2 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-08-07T04:00:59.645Z
Learnt from: colinaaa
PR: lynx-family/lynx-stack#1454
File: pnpm-workspace.yaml:46-46
Timestamp: 2025-08-07T04:00:59.645Z
Learning: In the lynx-family/lynx-stack repository, the webpack patch (patches/webpack5.101.0.patch) was created to fix issues with webpack5.99.9 but only takes effect on webpack5.100.0 and later versions. The patchedDependencies entry should use "webpack@^5.100.0" to ensure the patch applies to the correct version range.

Applied to files:

  • .changeset/rotten-queens-drum.md
📚 Learning: 2025-07-22T09:23:07.797Z
Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.

Applied to files:

  • .changeset/rotten-queens-drum.md
🧬 Code Graph Analysis (2)
packages/react/runtime/src/backgroundSnapshot.ts (1)
packages/react/runtime/src/lifecycle/patch/snapshotPatch.ts (2)
  • __globalSnapshotPatch (53-53)
  • SnapshotOperation (11-20)
packages/react/runtime/__test__/lynx/suspense.test.jsx (3)
packages/react/runtime/__test__/createSuspender.jsx (1)
  • createSuspender (8-26)
packages/react/runtime/src/lynx/suspense.ts (1)
  • Suspense (14-44)
packages/react/runtime/__test__/utils/envManager.ts (1)
  • globalEnvManager (86-86)
🔇 Additional comments (2)
.changeset/rotten-queens-drum.md (1)

1-6: Changeset entry is appropriate and user-facing.

Patch bump on @lynx-js/react with a concise bug description matches our changeset policy for end-user fixes.

packages/react/runtime/src/backgroundSnapshot.ts (1)

513-525: Guarding snapshot patch pushes fixes the Suspense race – LGTM.

Switching to optional chaining on CreateElement/InsertBefore in reconstructInstanceTree prevents the undefined-access when the collector isn’t initialized. This aligns with how other mutation sites already guard on __globalSnapshotPatch.

Copy link

codecov bot commented Aug 20, 2025

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!

Copy link

relativeci bot commented Aug 20, 2025

Web Explorer

#4423 Bundle Size — 366.68KiB (0%).

5d8f582(current) vs d4fd6cb main#4411(baseline)

Bundle metrics  Change 1 change
                 Current
#4423
     Baseline
#4411
No change  Initial JS 143.49KiB 143.49KiB
No change  Initial CSS 31.84KiB 31.84KiB
No change  Cache Invalidation 0% 0%
No change  Chunks 7 7
No change  Assets 7 7
Change  Modules 211(+0.48%) 210
No change  Duplicate Modules 17 17
No change  Duplicate Code 3.89% 3.89%
No change  Packages 4 4
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#4423
     Baseline
#4411
No change  JS 234.68KiB 234.68KiB
No change  Other 100.16KiB 100.16KiB
No change  CSS 31.84KiB 31.84KiB

Bundle analysis reportBranch Yradex:fix/1Project dashboard


Generated by RelativeCIDocumentationReport issue

Copy link

relativeci bot commented Aug 20, 2025

React Example

#4430 Bundle Size — 237.09KiB (~+0.01%).

5d8f582(current) vs d4fd6cb main#4418(baseline)

Bundle metrics  Change 2 changes
                 Current
#4430
     Baseline
#4418
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
Change  Cache Invalidation 38.52% 0%
No change  Chunks 0 0
No change  Assets 4 4
No change  Modules 158 158
No change  Duplicate Modules 64 64
Change  Duplicate Code 45.85%(-0.02%) 45.86%
No change  Packages 2 2
No change  Duplicate Packages 0 0
Bundle size by type  Change 1 change Regression 1 regression
                 Current
#4430
     Baseline
#4418
No change  IMG 145.76KiB 145.76KiB
Regression  Other 91.33KiB (+0.02%) 91.31KiB

Bundle analysis reportBranch Yradex:fix/1Project dashboard


Generated by RelativeCIDocumentationReport issue

Copy link

codspeed-hq bot commented Aug 20, 2025

CodSpeed Performance Report

Merging #1569 will not alter performance

Comparing Yradex:fix/1 (5d8f582) with main (f0d483c)

Summary

✅ 10 untouched benchmarks

@Yradex Yradex merged commit 6095aa8 into lynx-family:main Aug 21, 2025
110 of 119 checks passed
@Yradex Yradex deleted the fix/1 branch August 21, 2025 04:02
colinaaa pushed a commit that referenced this pull request Aug 26, 2025
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/[email protected]

### Patch Changes

- fix `withInitDataInState` got wrong state in 2nd or more times
`defaultDataProcessor`, now it will keep its own state.
([#1478](#1478))

- change `__CreateElement('raw-text')` to `__CreateRawText('')` to avoid
`setNativeProps` not working
([#1570](#1570))

- Fix wrong render result when using expression as `key`.
([#1541](#1541))

See
[#1371](#1371)
for more details.

- fix: `Cannot read properties of undefined` error when using `Suspense`
([#1569](#1569))

- Add `animate` API in Main Thread Script(MTS), so you can now control a
CSS animation imperatively
([#1534](#1534))

    ```ts
    import type { MainThread } from "@lynx-js/types";

    function startAnimation(ele: MainThread.Element) {
      "main thread";
      const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
        duration: 3000,
      });

      // Can also be paused
      // animation.pause()
    }
    ```

## @lynx-js/[email protected]

### Patch Changes

- Support caching Lynx native events when chunk splitting is enabled.
([#1370](#1370))

When `performance.chunkSplit.strategy` is not `all-in-one`, Lynx native
events are cached until the BTS chunk is fully loaded and are replayed
when that chunk is ready. The `firstScreenSyncTiming` flag will no
longer change to `jsReady` anymore.

- Support exporting `Promise` and function in `lynx.config.ts`.
([#1590](#1590))

- Fix missing `publicPath` using when `rspeedy dev --mode production`.
([#1310](#1310))

- Updated dependencies
\[[`aaca8f9`](aaca8f9)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## [email protected]

### Patch Changes

- Add `@lynx-js/preact-devtools` by default.
([#1593](#1593))

## @lynx-js/[email protected]

### Patch Changes

- Bump @clack/prompts to v1.0.0-alpha.4
([#1559](#1559))

## @lynx-js/[email protected]

### Patch Changes

- Support using multiple times in different environments.
([#1498](#1498))

- Support caching Lynx native events when chunk splitting is enabled.
([#1370](#1370))

When `performance.chunkSplit.strategy` is not `all-in-one`, Lynx native
events are cached until the BTS chunk is fully loaded and are replayed
when that chunk is ready. The `firstScreenSyncTiming` flag will no
longer change to `jsReady` anymore.

- Updated dependencies
\[[`f0d483c`](f0d483c),
[`e4d116b`](e4d116b),
[`d33c1d2`](d33c1d2)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- Support using multiple times in different environments.
([#1498](#1498))

- Alias `@lynx-js/preact-devtools` to `false` to reduce an import of
empty webpack module.
([#1593](#1593))

## @lynx-js/[email protected]

### Patch Changes

- Support `lynx.createSelectorQuery().select()` and `setNativeProps` API
([#1570](#1570))

## @lynx-js/[email protected]

### Patch Changes

- fix: globalThis is never accessible in MTS
([#1531](#1531))

-   Updated dependencies \[]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- fix: fake uidisappear event
([#1539](#1539))

- Updated dependencies
\[[`70863fb`](70863fb)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- fix: globalThis is never accessible in MTS
([#1531](#1531))

- Updated dependencies
\[[`70863fb`](70863fb)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- fix: globalThis is never accessible in MTS
([#1531](#1531))

- Updated dependencies
\[[`70863fb`](70863fb)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- Add new `LynxCacheEventsPlugin`, which will cache Lynx native events
until the BTS chunk is fully loaded, and replay them when the BTS chunk
is ready. ([#1370](#1370))

- Updated dependencies
\[[`aaca8f9`](aaca8f9)]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- Updated dependencies
\[[`aaca8f9`](aaca8f9)]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- Updated dependencies
\[[`aaca8f9`](aaca8f9)]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- Updated dependencies
\[[`aaca8f9`](aaca8f9)]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- Always inline the background script that contains rspack runtime
module. ([#1582](#1582))

- Updated dependencies
\[[`aaca8f9`](aaca8f9)]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- Add `lynxCacheEventsSetupList` and `lynxCacheEvents` to
RuntimeGlobals. It will be used to cache Lynx native events until the
BTS chunk is fully loaded, and replay them when the BTS chunk is ready.
([#1370](#1370))

## [email protected]



## @lynx-js/[email protected]



## @lynx-js/[email protected]



## @lynx-js/[email protected]

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants