fix(react/runtime): resolve race condition in runWithForce

[colinaaa]

Summary

The options[DIFF] may be overridden during the unmount process:

lynx-stack/packages/react/runtime/src/lifecycle/delayUnmount.ts

Lines 40 to 45 in 0a616c9

	options[DIFF] = (vnode: VNode) => {
	// A new diff indicates that the unmounting process of parentVNode is finished.
	parentVNode = undefined;
	options[DIFF] = oldDiff;
	oldDiff?.(vnode);
	};

This would conflict with the overwriting of options[DIFF] within runWithForce():

lynx-stack/packages/react/runtime/src/lynx/runWithForce.ts

Line 11 in 0a616c9

options[DIFF] = (vnode: VNode) => {

In a real-world scenario, consider simultaneously updating GlobalProps and states.

• First tick:
  • We have options[DIFF] === oldDiff at the beginning.
  • updateGlobalProps
    • We still have options[DIFF] === diffUnmount ✅
    • A Promise.resolve().then() is called to enqueue a runWithForce update.
  • renderComponent
    • We set options[DIFF] to diffUnmount ✅
    • when there is a state update that causes a JSX being removed (options.unmount will be called)
• Second tick:
  • runWithForce is called
    • We set options[DIFF] to diffRunWithForce ✅
  • render()
    • options[DIFF] would be called in the order of diffRunWithForce -> diffUnmount -> oldDiff
    • In diffUnmount, the options[DIFF] would be reset to oldDiff ❌
    • But the options[DIFFED] is still overwritten. And the vnode[COMPONENT] would be set to undefined for every following vnode. 👈 This is what we are fixing in the patch
      

      lynx-stack/packages/react/runtime/src/lynx/runWithForce.ts

      Lines 35 to 44 in 0a616c9

      	options[DIFFED] = (vnode: VNode) => {
      	if (oldDiffed) {
      	oldDiffed(vnode);
      	}
      	// delete is a reverse operation of previous `Object.defineProperty`
      	delete vnode[COMPONENT];
      	// restore
      	vnode[COMPONENT] = m.get(vnode);
      	};

  • runWithForce ended
    • We set options[DIFF] to diffUnmount ❌

We are not addressing the value of options[DIFF] in this patch, as it does not currently cause incorrect behavior. However, we are resolving the vnode[COMPONENT] issue, as it leads to incorrect functionality in hooks and diff operations.

Checklist

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 8a85ec4

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

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

📢 Thoughts on this report? Let us know!

[codecov]

Bundle Report

Changes will increase total bundle size by 3.19kB (0.5%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
@lynx-js/example-react-lynx-cjs	320.98kB	3.19kB (1.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: @lynx-js/example-react-lynx-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
main.lynx.bundle	1.62kB	89.75kB	1.83%
.rspeedy/main/main-thread.js	399 bytes	40.46kB	1.0%
.rspeedy/main/background.*.js	1.17kB	40.22kB	3.0%

[codspeed-hq]

CodSpeed Performance Report

Merging #707 will not alter performance

_{Comparing colinaaa:colin/0507/run-with-force (8a85ec4) with main (aba30cb)}

Summary

✅ 1 untouched benchmarks