Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[refresh] Fix default export signatures for memo/forwardRef/hoc #32705

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[refresh] Fix default export signatures for memo/forwardRef/hoc #32705

wants to merge 1 commit into from
+208 −4

Conversation

rickhanlonii
Copy link
Member

@rickhanlonii rickhanlonii commented Mar 21, 2025 •
edited
Loading

Overview

Not actually sure this is the right fix.

Fixes a bug in react-refresh that does not detect changes between default exports for memo/forwardRef/Hoc.

Explanation of bug

Consider changing a file between these three exports:

export default Child;

// edit 1
export default memo(Child);

// edit 2
export default forwardRef(Child);

// edit 3
export default hoc(Child);

The babel plugin will insert $RefreshReg$ as:

$RefreshReg$(Child, "Child");

// edit 1
$RefreshReg$(Child, "Child");
$RefreshReg$(memo(Child), "%default%");       // <- same id

// edit 2
$RefreshReg$(Child, "Child");
$RefreshReg$(forwardRef(Child), "%default%"); // <- same id

// edit 3
$RefreshReg$(Child, "Child");
$RefreshReg$(hoc(Child), "%default%");        // <- same id

However, these need to be registered with different IDs or they will be treated like an update:

react/packages/react-refresh/src/ReactFreshRuntime.js

Lines 319 to 325 in 86d5ac0

let family = allFamiliesByID.get(id);
if (family === undefined) {
family = {current: type};
allFamiliesByID.set(id, family);
} else {
pendingUpdates.push([family, type]);
}

Fix

Fixes to add the $React.memo|forwardRef|hoc suffix like we do when you do memo(forwardRef)):

react/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap

Lines 404 to 405 in bc1a49d

$RefreshReg$(_c, "%default%$React.memo$forwardRef");
$RefreshReg$(_c2, "%default%$React.memo"); 

$RefreshReg$(Child, "Child");

// edit 1
$RefreshReg$(Child, "Child");
$RefreshReg$(memo(Child), "%default%$React.memo");             // <- different id

// edit 2
$RefreshReg$(Child, "Child");
$RefreshReg$(forwardRef(Child), "%default%$React.forwardRef"); // <- different id

// edit 3
$RefreshReg$(Child, "Child");
$RefreshReg$(hoc(Child), "%default%hoc");                      // <- different id

@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Mar 21, 2025
rickhanlonii
rickhanlonii commented Mar 21, 2025
View reviewed changes
packages/react-refresh/src/ReactFreshBabelPlugin.js
// export default memo(React.forwardRef(function() {}))
callback(inferredName, node, path);

// TODO: this is a hack, we should find a better way to detect this.
Copy link
Member Author

Choose a reason for hiding this comment

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

I suck at babel, and this call is recursive. Consider this a proof of concept of a fix.

@react-sizebot
Copy link

Comparing: e1e7407...bc1a49d

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 517.29 kB 517.29 kB = 92.26 kB 92.26 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 617.68 kB 617.58 kB = 109.55 kB 109.52 kB
facebook-www/ReactDOM-prod.classic.js = 653.74 kB 653.67 kB = 115.19 kB 115.18 kB
facebook-www/ReactDOM-prod.modern.js = 644.02 kB 643.95 kB = 113.61 kB 113.59 kB
oss-stable-semver/react/cjs/react.react-server.development.js +2.82% 28.11 kB 28.90 kB +1.56% 6.82 kB 6.92 kB
oss-stable/react/cjs/react.react-server.development.js +2.82% 28.13 kB 28.93 kB +1.55% 6.84 kB 6.95 kB
oss-experimental/react/cjs/react.react-server.development.js +2.39% 35.12 kB 35.96 kB +1.28% 8.38 kB 8.49 kB
facebook-www/React-dev.modern.js +2.20% 54.28 kB 55.47 kB +1.29% 11.92 kB 12.08 kB
facebook-www/React-dev.classic.js +2.20% 54.28 kB 55.47 kB +1.29% 11.93 kB 12.08 kB
oss-stable-semver/react-is/cjs/react-is.production.js +2.01% 4.47 kB 4.56 kB +1.67% 1.08 kB 1.10 kB
oss-stable/react-is/cjs/react-is.production.js +2.01% 4.47 kB 4.56 kB +1.67% 1.08 kB 1.10 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-semver/react/cjs/react.react-server.development.js +2.82% 28.11 kB 28.90 kB +1.56% 6.82 kB 6.92 kB
oss-stable/react/cjs/react.react-server.development.js +2.82% 28.13 kB 28.93 kB +1.55% 6.84 kB 6.95 kB
oss-experimental/react/cjs/react.react-server.development.js +2.39% 35.12 kB 35.96 kB +1.28% 8.38 kB 8.49 kB
facebook-www/React-dev.modern.js +2.20% 54.28 kB 55.47 kB +1.29% 11.92 kB 12.08 kB
facebook-www/React-dev.classic.js +2.20% 54.28 kB 55.47 kB +1.29% 11.93 kB 12.08 kB
oss-stable-semver/react-is/cjs/react-is.production.js +2.01% 4.47 kB 4.56 kB +1.67% 1.08 kB 1.10 kB
oss-stable/react-is/cjs/react-is.production.js +2.01% 4.47 kB 4.56 kB +1.67% 1.08 kB 1.10 kB
oss-experimental/react-is/cjs/react-is.production.js +1.99% 4.52 kB 4.61 kB +1.66% 1.09 kB 1.10 kB
oss-stable-semver/react-is/cjs/react-is.development.js +1.95% 5.02 kB 5.12 kB +1.77% 1.13 kB 1.15 kB
oss-stable/react-is/cjs/react-is.development.js +1.95% 5.02 kB 5.12 kB +1.77% 1.13 kB 1.15 kB
oss-experimental/react-is/cjs/react-is.development.js +1.94% 5.06 kB 5.16 kB +1.85% 1.13 kB 1.15 kB
facebook-react-native/react-is/cjs/ReactIs-prod.js +1.92% 4.68 kB 4.77 kB +1.65% 1.15 kB 1.17 kB
facebook-react-native/react-is/cjs/ReactIs-profiling.js +1.92% 4.68 kB 4.77 kB +1.65% 1.15 kB 1.17 kB
facebook-react-native/react-is/cjs/ReactIs-dev.js +1.88% 5.21 kB 5.31 kB +1.61% 1.18 kB 1.20 kB
oss-experimental/react/cjs/react.development.js +1.82% 46.17 kB 47.01 kB +1.06% 10.54 kB 10.66 kB
oss-stable-semver/react/cjs/react.development.js +1.79% 44.45 kB 45.24 kB +1.08% 10.16 kB 10.27 kB
oss-stable/react/cjs/react.development.js +1.79% 44.48 kB 45.27 kB +1.10% 10.18 kB 10.29 kB
facebook-react-native/react/cjs/React-dev.js +1.57% 50.48 kB 51.27 kB +0.93% 11.31 kB 11.42 kB
facebook-www/ReactIs-prod.classic.js +1.53% 5.89 kB 5.98 kB +1.46% 1.37 kB 1.39 kB
facebook-www/ReactIs-prod.modern.js +1.53% 5.89 kB 5.98 kB +1.46% 1.37 kB 1.39 kB
facebook-www/ReactIs-dev.classic.js +1.51% 6.49 kB 6.58 kB +1.43% 1.40 kB 1.42 kB
facebook-www/ReactIs-dev.modern.js +1.51% 6.49 kB 6.58 kB +1.43% 1.40 kB 1.42 kB
oss-experimental/react-refresh/cjs/react-refresh-babel.development.js +0.55% 22.10 kB 22.22 kB +0.55% 4.15 kB 4.17 kB
oss-stable-semver/react-refresh/cjs/react-refresh-babel.development.js +0.55% 22.10 kB 22.22 kB +0.55% 4.15 kB 4.17 kB
oss-stable/react-refresh/cjs/react-refresh-babel.development.js +0.55% 22.10 kB 22.22 kB +0.55% 4.15 kB 4.17 kB
oss-experimental/react-refresh/cjs/react-refresh-babel.production.js +0.47% 20.63 kB 20.72 kB +0.71% 4.08 kB 4.11 kB
oss-stable-semver/react-refresh/cjs/react-refresh-babel.production.js +0.47% 20.63 kB 20.72 kB +0.71% 4.08 kB 4.11 kB
oss-stable/react-refresh/cjs/react-refresh-babel.production.js +0.47% 20.63 kB 20.72 kB +0.71% 4.08 kB 4.11 kB

Generated by 🚫 dangerJS against bc1a49d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@rickhanlonii @react-sizebot @facebook-github-bot