Skip to content

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

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
Open
rickhanlonii wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

rickhanlonii wants to merge 1 commit into from

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

@rickhanlonii rickhanlonii Mar 21, 2025

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

react-sizebot commented Mar 21, 2025

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