Skip to content

fix(react/runtime): delay applying mt:ref until hydration has finished#1001

Merged
Yradex merged 4 commits intolynx-family:mainfrom
Yradex:mts-delay-ref-apply
Jun 11, 2025
Merged

fix(react/runtime): delay applying mt:ref until hydration has finished#1001
Yradex merged 4 commits intolynx-family:mainfrom
Yradex:mts-delay-ref-apply

Conversation

@Yradex
Copy link
Collaborator

@Yradex Yradex commented Jun 5, 2025

Summary

Fix a problem causing MainThreadRefs to not be updated correctly during hydration when they are set to main-thread:refs.

This is caused by a mixed order of MTS hydration and main-thread:ref triggering. Therefore, we ensure that hydration completes first before triggering references.

Fix #1046

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

@changeset-bot
Copy link

changeset-bot bot commented Jun 5, 2025

🦋 Changeset detected

Latest commit: aad8380

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

@Yradex Yradex marked this pull request as draft June 5, 2025 08:18
@codspeed-hq
Copy link

codspeed-hq bot commented Jun 5, 2025

CodSpeed Performance Report

Merging #1001 will not alter performance

Comparing Yradex:mts-delay-ref-apply (aad8380) with main (51676ed)

Summary

✅ 8 untouched benchmarks

@Yradex Yradex force-pushed the mts-delay-ref-apply branch from 899d69f to 8c3c683 Compare June 5, 2025 08:36
@relativeci
Copy link

relativeci bot commented Jun 5, 2025

Web Explorer

#1468 Bundle Size — 255.42KiB (0%).

aad8380(current) vs 51676ed main#1451(baseline)

Bundle metrics  no changes
                 Current
#1468
     Baseline
#1451
No change  Initial JS 138.7KiB 138.7KiB
No change  Initial CSS 31.79KiB 31.79KiB
No change  Cache Invalidation 0% 0%
No change  Chunks 4 4
No change  Assets 4 4
No change  Modules 201 201
No change  Duplicate Modules 14 14
No change  Duplicate Code 3.29% 3.29%
No change  Packages 4 4
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#1468
     Baseline
#1451
No change  JS 223.63KiB 223.63KiB
No change  CSS 31.79KiB 31.79KiB

Bundle analysis reportBranch Yradex:mts-delay-ref-applyProject dashboard


Generated by RelativeCIDocumentationReport issue

@relativeci
Copy link

relativeci bot commented Jun 5, 2025

React Example

#1479 Bundle Size — 232.57KiB (+0.18%).

aad8380(current) vs 51676ed main#1462(baseline)

Bundle metrics  Change 2 changes
                 Current
#1479
     Baseline
#1462
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
Change  Cache Invalidation 37.21% 37.09%
No change  Chunks 0 0
No change  Assets 4 4
No change  Modules 143 143
No change  Duplicate Modules 55 55
Change  Duplicate Code 45.68%(-0.02%) 45.69%
No change  Packages 2 2
No change  Duplicate Packages 0 0
Bundle size by type  Change 1 change Regression 1 regression
                 Current
#1479
     Baseline
#1462
No change  IMG 145.76KiB 145.76KiB
Regression  Other 86.82KiB (+0.49%) 86.39KiB

Bundle analysis reportBranch Yradex:mts-delay-ref-applyProject dashboard


Generated by RelativeCIDocumentationReport issue

@Yradex Yradex force-pushed the mts-delay-ref-apply branch from 8c3c683 to 43e45b9 Compare June 5, 2025 08:40
@codecov
Copy link

codecov bot commented Jun 5, 2025

Codecov Report

Attention: Patch coverage is 83.78378% with 6 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...es/react/worklet-runtime/src/bindings/observers.ts 0.00% 6 Missing ⚠️

📢 Thoughts on this report? Let us know!

@Yradex Yradex force-pushed the mts-delay-ref-apply branch 6 times, most recently from f32a2ab to a101a29 Compare June 5, 2025 12:56
@Yradex Yradex marked this pull request as ready for review June 9, 2025 06:03
@Yradex Yradex requested review from colinaaa and hzy June 9, 2025 06:58
@Yradex Yradex enabled auto-merge June 9, 2025 12:46
@Yradex Yradex disabled auto-merge June 9, 2025 12:46
@Yradex Yradex force-pushed the mts-delay-ref-apply branch from 0320790 to aa44d80 Compare June 10, 2025 12:26
@Yradex Yradex enabled auto-merge June 11, 2025 07:50
@Yradex Yradex added this pull request to the merge queue Jun 11, 2025
Merged via the queue into lynx-family:main with commit 8468143 Jun 11, 2025
67 of 73 checks passed
@Yradex Yradex deleted the mts-delay-ref-apply branch June 11, 2025 11:00
colinaaa pushed a commit that referenced this pull request Jun 20, 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/react@0.110.0

### Minor Changes

- Fixed closure variable capture issue in effect hooks to prevent stale
values and ensured proper execution order between refs, effects, and
event handlers.
([#770](#770))

    **Breaking Changes**:

- The execution timing of `ref`, `useEffect()` callback,
`componentDidMount`, `componentDidUpdate`, `componentWillUnmount` and
the callback of `setState` have been moved forward. These effects will
now execute before hydration is complete, rather than waiting for the
main thread update to complete.
- For components inside `<list />`, `ref` callbacks will now be
triggered during background thread rendering, regardless of component
visibility. If your code depends on component visibility timing, use
`main-thread:ref` instead of regular `ref`.

### Patch Changes

- Fixed two memory leaks:
([#1071](#1071))

1. When JSX is rendered on the main thread and removed, FiberElement can
still be referenced by `__root.__jsx` through `props.children`;

2. When the SnapshotInstance tree is removed from the root node, its
child nodes form a cycle reference because the `__previousSibling` and
`__nextSibling` properties point to each other, thus causing a
FiberElement leak.

- Optimize the error message when snapshots cannot be found in the main
thread. ([#1083](#1083))

- Fix a problem causing `MainThreadRef`s to not be updated correctly
during hydration when they are set to `main-thread:ref`s.
([#1001](#1001))

- Add snapshot id report when throwing `snapshotPatchApply failed: ctx
not found` error.
([#1107](#1107))

- Fix a bug in ReactLynx Testing Library that rendered snapshot of
inline style was normalized incorrectly (eg. `flex:1` was normalized to
`flex: 1 1 0%;` incorrectly).
([#1040](#1040))

## @lynx-js/web-core@0.14.0

### Minor Changes

- refactor: the default thread-strategy will be all on ui
([#1105](#1105))

    **This is a breaking change!!!**

### Patch Changes

- feat: add `_SetSourceMapRelease(errInfo)` MTS API.
([#1118](#1118))

You can get `errInfo.release` through `e.detail.release` in the error
event callback of lynx-view.

The `_SetSourceMapRelease` function is not complete yet, because it is
currently limited by the Web platform and some functions and some props
such as `err.stack` do not need to be supported for the time being.

- feat: add `_I18nResourceTranslation` api in mts &&
`init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view.
([#1065](#1065))

`init-i18n-resource` is the complete set of i18nResources that need to
be maintained on the container side. Note: You need to pass this value
when lynx-view is initialized.

You can use `_I18nResourceTranslation` in MTS to get the corresponding
i18nResource from `init-i18n-resources`. If it is undefined, the
`i18nResourceMissed` event will be dispatched.

    ```js
    // ui thread
    lynxView.initI18nResources = [
      {
        options: {
          locale: "en",
          channel: "1",
          fallback_url: "",
        },
        resource: {
          hello: "hello",
          lynx: "lynx web platform1",
        },
      },
    ];
    lynxView.addEventListener("i18nResourceMissed", (e) => {
      console.log(e);
    });

    // mts
    _I18nResourceTranslation({
      locale: "en",
      channel: "1",
      fallback_url: "",
    });
    ```

- fix: lynx-view `updateGlobalProps` method will also update
globalProps, so `reload()` will use the latest updated globalProps.
([#1119](#1119))

- feat: supports `lynx.getI18nResource()` and `onI18nResourceReady`
event in bts.
([#1088](#1088))

- `lynx.getI18nResource()` can be used to get i18nResource in bts, it
has two data sources:
        -   the result of `_I18nResourceTranslation()`
- lynx-view `updateI18nResources(data: InitI18nResources, options:
I18nResourceTranslationOptions)`, it will be matched to the correct
i8nResource as a result of `lynx.getI18nResource()`
- `onI18nResourceReady` event can be used to listen
`_I18nResourceTranslation` and lynx-view `updateI18nResources`
execution.

- refactor: make the opcode be a plain array
([#1051](#1051))

    \#1042

- feat: The error event return value detail of lynx-view adds
`sourceMap` value, the type is as follows:
([#1058](#1058))

        CustomEvent<{
          error: Error;
          sourceMap: {
            offset: {
              line: number;
              col: number;
            };
          };
        }>;

This is because web-core adds wrapper at runtime, which causes the stack
offset to be different. Now you can calculate the real offset based on
it.

- feat: add `updateI18nResources` method of lynx-view.
([#1085](#1085))

Now you can use `updateI18nResources` to update i18nResources, and then
use \_I18nResourceTranslation() to get the updated result.

- fix: --lynx-color will be removed, and if color contains `gradient` it
will be processed as transparent.
([#1069](#1069))

- Updated dependencies
\[[`42ed2e3`](42ed2e3),
[`25a04c9`](25a04c9),
[`0dbb8b1`](0dbb8b1),
[`f99de1e`](f99de1e),
[`873a285`](873a285),
[`afacb2c`](afacb2c),
[`1861cbe`](1861cbe)]:
    -   @lynx-js/web-worker-runtime@0.14.0
    -   @lynx-js/web-mainthread-apis@0.14.0
    -   @lynx-js/web-constants@0.14.0
    -   @lynx-js/offscreen-document@0.1.2
    -   @lynx-js/web-worker-rpc@0.14.0

## @lynx-js/css-extract-webpack-plugin@0.6.0

### Minor Changes

- Fix CSS HMR crash issues by using the same encode options with the
main template.
([#1033](#1033))

## @lynx-js/template-webpack-plugin@0.8.0

### Minor Changes

- Remove `EncodeCSSOptions` and `encodeCSS` to ensure consistent
encoding options are used across CSS HMR updates and the main template.
([#1033](#1033))

### Patch Changes

- Avoid generating lazy bundles when there are no chunk name.
([#1090](#1090))

    E.g.: using `import.meta.webpackContext`.

## create-rspeedy@0.9.10

### Patch Changes

- Enable TypeScript check in templates.
([#1093](#1093))

- Fix a bug in ReactLynx Testing Library that rendered snapshot of
inline style was normalized incorrectly (eg. `flex:1` was normalized to
`flex: 1 1 0%;` incorrectly).
([#1040](#1040))

## @lynx-js/react-rsbuild-plugin@0.10.4

### Patch Changes

- Support `@lynx-js/react` v0.110.0.
([#770](#770))

- Updated dependencies
\[[`f84a1cc`](f84a1cc),
[`0d151db`](0d151db),
[`0d151db`](0d151db),
[`51676ed`](51676ed),
[`0d151db`](0d151db),
[`a43ae05`](a43ae05),
[`0a0ef40`](0a0ef40),
[`9b61210`](9b61210)]:
    -   @lynx-js/react-alias-rsbuild-plugin@0.10.4
    -   @lynx-js/react-webpack-plugin@0.6.16
    -   @lynx-js/css-extract-webpack-plugin@0.6.0
    -   @lynx-js/template-webpack-plugin@0.8.0
    -   @lynx-js/react-refresh-webpack-plugin@0.3.3
    -   @lynx-js/use-sync-external-store@1.5.0

## @lynx-js/react-alias-rsbuild-plugin@0.10.4

### Patch Changes

- Replace `enhanced-resolve` with `unrs-resolver`
([#936](#936))

## @lynx-js/testing-environment@0.1.1

### Patch Changes

- Fix `getJSContext` or `getCoreContext` is not a function.
([#1122](#1122))

## @lynx-js/tailwind-preset@0.0.4

### Patch Changes

- Avoid publishing test files.
([#1125](#1125))

## @lynx-js/offscreen-document@0.1.2

### Patch Changes

- refactor: make the opcode be a plain array
([#1051](#1051))

    \#1042

## @lynx-js/web-constants@0.14.0

### Patch Changes

- feat: add `_SetSourceMapRelease(errInfo)` MTS API.
([#1118](#1118))

You can get `errInfo.release` through `e.detail.release` in the error
event callback of lynx-view.

The `_SetSourceMapRelease` function is not complete yet, because it is
currently limited by the Web platform and some functions and some props
such as `err.stack` do not need to be supported for the time being.

- feat: add `_I18nResourceTranslation` api in mts &&
`init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view.
([#1065](#1065))

`init-i18n-resource` is the complete set of i18nResources that need to
be maintained on the container side. Note: You need to pass this value
when lynx-view is initialized.

You can use `_I18nResourceTranslation` in MTS to get the corresponding
i18nResource from `init-i18n-resources`. If it is undefined, the
`i18nResourceMissed` event will be dispatched.

    ```js
    // ui thread
    lynxView.initI18nResources = [
      {
        options: {
          locale: "en",
          channel: "1",
          fallback_url: "",
        },
        resource: {
          hello: "hello",
          lynx: "lynx web platform1",
        },
      },
    ];
    lynxView.addEventListener("i18nResourceMissed", (e) => {
      console.log(e);
    });

    // mts
    _I18nResourceTranslation({
      locale: "en",
      channel: "1",
      fallback_url: "",
    });
    ```

- feat: supports `lynx.getI18nResource()` and `onI18nResourceReady`
event in bts.
([#1088](#1088))

- `lynx.getI18nResource()` can be used to get i18nResource in bts, it
has two data sources:
        -   the result of `_I18nResourceTranslation()`
- lynx-view `updateI18nResources(data: InitI18nResources, options:
I18nResourceTranslationOptions)`, it will be matched to the correct
i8nResource as a result of `lynx.getI18nResource()`
- `onI18nResourceReady` event can be used to listen
`_I18nResourceTranslation` and lynx-view `updateI18nResources`
execution.

- refactor: make the opcode be a plain array
([#1051](#1051))

    \#1042

- feat: add `updateI18nResources` method of lynx-view.
([#1085](#1085))

Now you can use `updateI18nResources` to update i18nResources, and then
use \_I18nResourceTranslation() to get the updated result.

-   Updated dependencies \[]:
    -   @lynx-js/web-worker-rpc@0.14.0

## @lynx-js/web-core-server@0.14.0

### Patch Changes

- feat: add `_SetSourceMapRelease(errInfo)` MTS API.
([#1118](#1118))

You can get `errInfo.release` through `e.detail.release` in the error
event callback of lynx-view.

The `_SetSourceMapRelease` function is not complete yet, because it is
currently limited by the Web platform and some functions and some props
such as `err.stack` do not need to be supported for the time being.

- feat: add `_I18nResourceTranslation` api in mts &&
`init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view.
([#1065](#1065))

`init-i18n-resource` is the complete set of i18nResources that need to
be maintained on the container side. Note: You need to pass this value
when lynx-view is initialized.

You can use `_I18nResourceTranslation` in MTS to get the corresponding
i18nResource from `init-i18n-resources`. If it is undefined, the
`i18nResourceMissed` event will be dispatched.

    ```js
    // ui thread
    lynxView.initI18nResources = [
      {
        options: {
          locale: "en",
          channel: "1",
          fallback_url: "",
        },
        resource: {
          hello: "hello",
          lynx: "lynx web platform1",
        },
      },
    ];
    lynxView.addEventListener("i18nResourceMissed", (e) => {
      console.log(e);
    });

    // mts
    _I18nResourceTranslation({
      locale: "en",
      channel: "1",
      fallback_url: "",
    });
    ```

## @lynx-js/web-elements@0.7.6

### Patch Changes

- fix: incorrect syntax for x-canvas part
([#1067](#1067))

- feat: x-input && x-textarea add attribute input-filter, which can
filter input value.
([#1037](#1037))

- fix: incorrect top style of x-foldview-slot-ng if the toolbar is
wrapped in lynx-wrapper
([#1101](#1101))

- perf: add loading="lazy" for image element
([#1056](#1056))


<https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading>

- fix: --lynx-color will be removed, and if color contains `gradient` it
will be processed as transparent.
([#1069](#1069))

- Updated dependencies
\[[`62d1078`](62d1078)]:
    -   @lynx-js/web-elements-template@0.7.6

## @lynx-js/web-elements-template@0.7.6

### Patch Changes

- perf: add loading="lazy" for image element
([#1056](#1056))


<https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading>

## @lynx-js/web-mainthread-apis@0.14.0

### Patch Changes

- feat: add `_SetSourceMapRelease(errInfo)` MTS API.
([#1118](#1118))

You can get `errInfo.release` through `e.detail.release` in the error
event callback of lynx-view.

The `_SetSourceMapRelease` function is not complete yet, because it is
currently limited by the Web platform and some functions and some props
such as `err.stack` do not need to be supported for the time being.

- feat: add `_I18nResourceTranslation` api in mts &&
`init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view.
([#1065](#1065))

`init-i18n-resource` is the complete set of i18nResources that need to
be maintained on the container side. Note: You need to pass this value
when lynx-view is initialized.

You can use `_I18nResourceTranslation` in MTS to get the corresponding
i18nResource from `init-i18n-resources`. If it is undefined, the
`i18nResourceMissed` event will be dispatched.

    ```js
    // ui thread
    lynxView.initI18nResources = [
      {
        options: {
          locale: "en",
          channel: "1",
          fallback_url: "",
        },
        resource: {
          hello: "hello",
          lynx: "lynx web platform1",
        },
      },
    ];
    lynxView.addEventListener("i18nResourceMissed", (e) => {
      console.log(e);
    });

    // mts
    _I18nResourceTranslation({
      locale: "en",
      channel: "1",
      fallback_url: "",
    });
    ```

- feat: supports `lynx.getI18nResource()` and `onI18nResourceReady`
event in bts.
([#1088](#1088))

- `lynx.getI18nResource()` can be used to get i18nResource in bts, it
has two data sources:
        -   the result of `_I18nResourceTranslation()`
- lynx-view `updateI18nResources(data: InitI18nResources, options:
I18nResourceTranslationOptions)`, it will be matched to the correct
i8nResource as a result of `lynx.getI18nResource()`
- `onI18nResourceReady` event can be used to listen
`_I18nResourceTranslation` and lynx-view `updateI18nResources`
execution.

- feat: add `updateI18nResources` method of lynx-view.
([#1085](#1085))

Now you can use `updateI18nResources` to update i18nResources, and then
use \_I18nResourceTranslation() to get the updated result.

- fix: `decodeCssInJs` will not throw error.
([#1120](#1120))

Before this pr, decoding css will be strictly executed according to
cssInfo, and an error will be thrown if data that does not meet the
requirements is encountered. Now it is changed to console.warn, which
will not block rendering.

- Updated dependencies
\[[`25a04c9`](25a04c9),
[`0dbb8b1`](0dbb8b1),
[`f99de1e`](f99de1e),
[`873a285`](873a285),
[`afacb2c`](afacb2c),
[`7e73450`](7e73450)]:
    -   @lynx-js/web-constants@0.14.0
    -   @lynx-js/web-style-transformer@0.3.1

## @lynx-js/web-platform-rsbuild-plugin@0.1.1

### Patch Changes

- Fix build on Windows
([#1048](#1048))

## @lynx-js/web-style-transformer@0.3.1

### Patch Changes

- fix: --lynx-color will be removed, and if color contains `gradient` it
will be processed as transparent.
([#1069](#1069))

## @lynx-js/web-worker-runtime@0.14.0

### Patch Changes

- fix: The parameter config of loadCard needs to add updateData,
otherwise some event binding will fail when enableJSDataProcessor is
turned on.
([#1077](#1077))

- feat: add `_I18nResourceTranslation` api in mts &&
`init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view.
([#1065](#1065))

`init-i18n-resource` is the complete set of i18nResources that need to
be maintained on the container side. Note: You need to pass this value
when lynx-view is initialized.

You can use `_I18nResourceTranslation` in MTS to get the corresponding
i18nResource from `init-i18n-resources`. If it is undefined, the
`i18nResourceMissed` event will be dispatched.

    ```js
    // ui thread
    lynxView.initI18nResources = [
      {
        options: {
          locale: "en",
          channel: "1",
          fallback_url: "",
        },
        resource: {
          hello: "hello",
          lynx: "lynx web platform1",
        },
      },
    ];
    lynxView.addEventListener("i18nResourceMissed", (e) => {
      console.log(e);
    });

    // mts
    _I18nResourceTranslation({
      locale: "en",
      channel: "1",
      fallback_url: "",
    });
    ```

- feat: supports `lynx.getI18nResource()` and `onI18nResourceReady`
event in bts.
([#1088](#1088))

- `lynx.getI18nResource()` can be used to get i18nResource in bts, it
has two data sources:
        -   the result of `_I18nResourceTranslation()`
- lynx-view `updateI18nResources(data: InitI18nResources, options:
I18nResourceTranslationOptions)`, it will be matched to the correct
i8nResource as a result of `lynx.getI18nResource()`
- `onI18nResourceReady` event can be used to listen
`_I18nResourceTranslation` and lynx-view `updateI18nResources`
execution.

- feat: add `updateI18nResources` method of lynx-view.
([#1085](#1085))

Now you can use `updateI18nResources` to update i18nResources, and then
use \_I18nResourceTranslation() to get the updated result.

- Updated dependencies
\[[`25a04c9`](25a04c9),
[`0dbb8b1`](0dbb8b1),
[`f99de1e`](f99de1e),
[`873a285`](873a285),
[`afacb2c`](afacb2c),
[`1861cbe`](1861cbe)]:
    -   @lynx-js/web-mainthread-apis@0.14.0
    -   @lynx-js/web-constants@0.14.0
    -   @lynx-js/offscreen-document@0.1.2
    -   @lynx-js/web-worker-rpc@0.14.0

## @lynx-js/react-webpack-plugin@0.6.16

### Patch Changes

- Supports `@lynx-js/template-webpack-plugin` 0.8.0.
([#1033](#1033))

- Support `@lynx-js/react` v0.110.0.
([#770](#770))

- Keep snapshot id unchanged on Windows.
([#1050](#1050))

- Fix lazy bundle name on Windows.
([#1060](#1060))

## @lynx-js/rspeedy@0.9.10



## upgrade-rspeedy@0.9.10



## @lynx-js/web-worker-rpc@0.14.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: MainThreadRef unexpectedly reset to init value

2 participants