Support module.property.useHook() in Fast Refresh#35318
Conversation
|
Comparing: 4174533...217828a Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
|
The issue you linked in the description is incorrect. Should be vitejs/vite-plugin-react#1006, right? |
|
yeah my bad! |
…fresh Add support for detecting hooks called via nested member expressions like `FancyHook.property.useNestedThing()` in React Fast Refresh. Previously, only direct hook calls and single-level member expressions were supported. This caused nested member expression hooks to force a full reset on HMR instead of preserving state. This implementation matches React PR #35318: react/react#35318 Co-authored-by: Dunqing <29533304+Dunqing@users.noreply.github.com>
|
This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated. |
|
This PR is still relevant |
|
This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated. |
|
A human decision on the relevance of the PR would be welcomed |
Port react/react#35318. Hook calls through a nested member expression such as `FancyHook.property.useNestedThing()` were not collected into the `$RefreshSig$` custom-hooks list, so components using them lost state on every fast-refresh update. Resolve the binding through one extra static member level, matching the Babel plugin, and force a reset when the root object has no binding. closes #16571
Port react/react#35318. Hook calls through a nested member expression such as `FancyHook.property.useNestedThing()` were not collected into the `$RefreshSig$` custom-hooks list, so components using them lost state on every fast-refresh update. Resolve the binding through one extra static member level, matching the Babel plugin, and force a reset when the root object has no binding. closes #16571
…23190) ## Summary Ports react/react#35318 to the React Refresh plugin: hook calls through a nested member expression such as `FancyHook.property.useNestedThing()` are now collected into the `$RefreshSig$` custom-hooks list, so components using them no longer lose state on every fast-refresh update. As in the Babel plugin, the binding is resolved through one extra static member level, and a force reset is emitted when the root object has no binding in scope. Deeper nesting (`A.B.C.useHook()`) remains uncollected, same as upstream; note that Babel additionally emits `forceReset = true` in that case while oxc does not — a pre-existing, intentional divergence from #6143 that this PR does not change. closes #16571 ## Example Input: ```jsx import FancyHook from 'fancy'; export default function App() { const foo = FancyHook.property.useNestedThing(); return <h1>{foo}</h1>; } ``` Signature before: ```js _s(App, "useNestedThing{foo}"); ``` Signature after: ```js _s(App, "useNestedThing{foo}", false, function() { return [FancyHook.property.useNestedThing]; }); ``` --- This PR was prepared with AI assistance; I reviewed, tested, and verified the changes.
…23190) ## Summary Ports react/react#35318 to the React Refresh plugin: hook calls through a nested member expression such as `FancyHook.property.useNestedThing()` are now collected into the `$RefreshSig$` custom-hooks list, so components using them no longer lose state on every fast-refresh update. As in the Babel plugin, the binding is resolved through one extra static member level, and a force reset is emitted when the root object has no binding in scope. Deeper nesting (`A.B.C.useHook()`) remains uncollected, same as upstream; note that Babel additionally emits `forceReset = true` in that case while oxc does not — a pre-existing, intentional divergence from #6143 that this PR does not change. closes #16571 ## Example Input: ```jsx import FancyHook from 'fancy'; export default function App() { const foo = FancyHook.property.useNestedThing(); return <h1>{foo}</h1>; } ``` Signature before: ```js _s(App, "useNestedThing{foo}"); ``` Signature after: ```js _s(App, "useNestedThing{foo}", false, function() { return [FancyHook.property.useNestedThing]; }); ``` --- This PR was prepared with AI assistance; I reviewed, tested, and verified the changes.
Summary
Fixes vitejs/vite-plugin-react#1006
I'm not sure a lot of users do nest hooks at the second level, but the added complexity to the Babel plugin fells low enough to add support to it.
Before this change, the signature for the test would have been
_s(App, "useNestedThing{foo}", true)which would force reset on HMR.