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.

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

Add hook warning when going to/from 0 hooks #24535

Closed
wants to merge 1 commit into from

Conversation

rickhanlonii
Copy link
Member

@rickhanlonii rickhanlonii commented May 10, 2022

Overview

Add a hook warning for when we go from 0 to n > 0 hooks or from n > 0 to 0 hooks in a component, such as using an early return like:

function App(props) {
  if (!props.foo) return;

  useEffect(() => {});
  return <span>Bar</span>;
}

We only add this warning in the new root, since the blocker to this in legacy mode was a quirk with React.lazy not applicable in the new root.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels May 10, 2022
@sizebot
Copy link

sizebot commented May 10, 2022

Comparing: 229c86a...b5e48aa

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.min.js = 131.76 kB 131.76 kB = 42.31 kB 42.31 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 137.03 kB 137.03 kB = 43.90 kB 43.89 kB
facebook-www/ReactDOM-prod.classic.js +0.04% 441.06 kB 441.24 kB +0.07% 80.67 kB 80.73 kB
facebook-www/ReactDOM-prod.modern.js +0.04% 426.37 kB 426.55 kB +0.08% 78.48 kB 78.54 kB
facebook-www/ReactDOMForked-prod.classic.js +0.04% 441.84 kB 442.02 kB +0.07% 80.91 kB 80.96 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ReactIs-dev.modern.js +0.97% 9.98 kB 10.07 kB +0.77% 2.58 kB 2.60 kB
facebook-www/ReactIs-dev.classic.js +0.97% 9.98 kB 10.07 kB +0.74% 2.58 kB 2.60 kB
facebook-www/ReactFlightDOMRelayClient-dev.modern.js +0.75% 12.94 kB 13.04 kB +0.47% 3.80 kB 3.82 kB
facebook-www/ReactFlightDOMRelayClient-dev.classic.js +0.75% 12.94 kB 13.04 kB +0.50% 3.80 kB 3.82 kB
facebook-www/ReactFreshRuntime-dev.modern.js +0.42% 22.93 kB 23.02 kB +0.28% 6.67 kB 6.69 kB
facebook-www/ReactFreshRuntime-dev.classic.js +0.42% 22.93 kB 23.02 kB +0.28% 6.67 kB 6.69 kB
facebook-www/ReactART-dev.modern.js +0.26% 764.22 kB 766.19 kB +0.23% 163.18 kB 163.56 kB
facebook-www/ReactART-dev.classic.js +0.25% 774.44 kB 776.41 kB +0.23% 165.32 kB 165.70 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.development.js +0.25% 656.72 kB 658.34 kB +0.23% 143.15 kB 143.48 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.development.js +0.25% 656.75 kB 658.37 kB +0.23% 143.17 kB 143.51 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-dev.js +0.25% 696.41 kB 698.12 kB +0.23% 149.98 kB 150.33 kB
oss-stable-semver/react-test-renderer/umd/react-test-renderer.development.js +0.24% 688.10 kB 689.78 kB +0.23% 144.68 kB 145.01 kB
oss-stable/react-test-renderer/umd/react-test-renderer.development.js +0.24% 688.12 kB 689.81 kB +0.23% 144.70 kB 145.04 kB
facebook-www/ReactTestRenderer-dev.modern.js +0.24% 717.72 kB 719.43 kB +0.22% 153.83 kB 154.17 kB
facebook-www/ReactTestRenderer-dev.classic.js +0.24% 717.72 kB 719.43 kB +0.22% 153.83 kB 154.17 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.development.js +0.24% 682.32 kB 683.94 kB +0.22% 148.37 kB 148.69 kB
oss-stable-semver/react-art/cjs/react-art.development.js +0.24% 683.81 kB 685.43 kB +0.23% 147.95 kB 148.29 kB
oss-stable/react-art/cjs/react-art.development.js +0.24% 683.83 kB 685.45 kB +0.23% 147.98 kB 148.31 kB
oss-experimental/react-test-renderer/umd/react-test-renderer.development.js +0.24% 715.00 kB 716.68 kB +0.22% 149.97 kB 150.30 kB
oss-experimental/react-art/cjs/react-art.development.js +0.23% 711.08 kB 712.70 kB +0.22% 153.64 kB 153.97 kB
react-native/implementations/ReactFabric-dev.js +0.22% 776.90 kB 778.61 kB +0.21% 169.26 kB 169.61 kB
react-native/implementations/ReactNativeRenderer-dev.js +0.22% 786.85 kB 788.56 kB +0.20% 171.69 kB 172.03 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js +0.22% 746.64 kB 748.26 kB +0.21% 158.96 kB 159.29 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js +0.22% 746.66 kB 748.28 kB +0.21% 158.99 kB 159.32 kB
oss-stable-semver/react-art/umd/react-art.development.js +0.21% 787.36 kB 789.05 kB +0.19% 166.11 kB 166.43 kB
oss-stable/react-art/umd/react-art.development.js +0.21% 787.39 kB 789.07 kB +0.19% 166.13 kB 166.45 kB
facebook-www/JSXDEVRuntime-dev.modern.js +0.21% 45.77 kB 45.87 kB +0.17% 12.88 kB 12.90 kB
facebook-www/JSXDEVRuntime-dev.classic.js +0.21% 45.77 kB 45.87 kB +0.16% 12.88 kB 12.90 kB
react-native/implementations/ReactFabric-dev.fb.js +0.21% 813.50 kB 815.21 kB +0.19% 175.75 kB 176.09 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.21% 774.19 kB 775.81 kB +0.20% 164.74 kB 165.06 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js +0.21% 823.52 kB 825.23 kB +0.19% 178.26 kB 178.59 kB
oss-experimental/react-art/umd/react-art.development.js +0.21% 815.97 kB 817.66 kB +0.19% 171.82 kB 172.15 kB

Generated by 🚫 dangerJS against b5e48aa

@gaearon
Copy link
Collaborator

gaearon commented May 11, 2022

This actually makes it throw, right? Not just a warning. So this would hard-break the code that currently (accidentally) relies on this.

I was thinking we'd do it the opposite way instead. I.e. fix the warning first to always show up. And later make it throw consistently after people have had a chance to fix the warnings.

@rickhanlonii
Copy link
Member Author

@gaearon that makes sense, I can update that.

@rickhanlonii
Copy link
Member Author

Ok I've updated the logic here such that:

  • We always warn in both legacy mode and concurrent mode.
  • We error in concurrent mode iff enableThrowOnMountForHookMismatch.
  • We never error in legacy mode (because of the memoizedState thing).

@rickhanlonii rickhanlonii force-pushed the rh-hook-warn branch 5 times, most recently from 6e92003 to 4b511ab Compare June 16, 2022 15:59
Copy link
Member Author

@rickhanlonii rickhanlonii left a comment

Choose a reason for hiding this comment

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

Ready to review

@@ -478,11 +521,25 @@ export function renderWithHooks<Props, SecondArg>(
ReactCurrentDispatcher.current = ContextOnlyDispatcher;

if (__DEV__) {
if (
Copy link
Member Author

Choose a reason for hiding this comment

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

Calling this out - this isn't pretty but it adds the warning for going from some hooks to no hooks.

'Rendered fewer hooks than expected. This may be caused by an ' +
'accidental early return statement.',
);
}).toErrorDev([
Copy link
Member Author

Choose a reason for hiding this comment

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

This is the warning the not pretty code mentioned above adds. As well as the "unmount effect" test below.

'Rendered fewer hooks than expected. This may be caused by an ' +
'accidental early return statement.',
);
}).toErrorDev([
Copy link
Member Author

Choose a reason for hiding this comment

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

This is the warning the not pretty code mentioned above adds. As well as the "unmount effect" test below.

@rickhanlonii
Copy link
Member Author

Replaced by: #25216

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

Successfully merging this pull request may close these issues.

5 participants