Strict Mode: Reuse memoized result from first pass

[acdlite]

In Strict Mode, during development, user functions are double invoked to help detect side effects. Currently, the way we implement this is to completely discard the first pass and start over. Theoretically this should be fine because components are idempotent. However, it's a bit tricky to get right because our implementation (i.e. renderWithHooks) is not completely idempotent with respect to internal data structures, like the work-in-progress fiber. In the past we've had to be really careful to avoid subtle bugs — for example, during the initial mount, setState functions are bound to the particular hook instances that were created during that render. If we compute new hook instances, we must also compute new children, and they must correspond to each other.

This commit addresses a similar issue that came up related to use: when something suspends, use reuses the promise that was passed during the first attempt. This is itself a form of memoization. We need to be able to memoize the reactive inputs to the use call using a hook (i.e. useMemo), which means, the reactive inputs to use must come from the same component invocation as the output.

The solution I've chosen is, rather than double invoke the entire renderWithHook function, we should double invoke each individual user function. It's a bit confusing but here's how it works:

We will invoke the entire component function twice. However, during the second invocation of the component, the hook state from the first invocation will be reused. That means things like useMemo functions won't run again, because the deps will match and the memoized result will be reused.

We want memoized functions to run twice, too, so account for this, user functions are double invoked during the first invocation of the component function, and are not double invoked during the second incovation:

• First execution of component function: user functions are double invoked
• Second execution of component function (in Strict Mode, during development): user functions are not double invoked.

It's hard to explain verbally but much clearer when you run the test cases I've added.

[sizebot]

Comparing: e7c5af4...fe59dfe

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	+0.03%	152.69 kB	152.74 kB	+0.06%	48.70 kB	48.73 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.03%	154.61 kB	154.66 kB	+0.04%	49.31 kB	49.33 kB
facebook-www/ReactDOM-prod.classic.js	+0.06%	526.73 kB	527.06 kB	+0.06%	94.09 kB	94.15 kB
facebook-www/ReactDOM-prod.modern.js	+0.06%	511.99 kB	512.32 kB	+0.06%	91.94 kB	92.00 kB
facebook-www/ReactDOMForked-prod.classic.js	+0.06%	526.73 kB	527.06 kB	+0.06%	94.10 kB	94.16 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-test-renderer/cjs/react-test-renderer.development.js	+0.36%	731.98 kB	734.62 kB	+0.49%	158.13 kB	158.90 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.development.js	+0.36%	732.00 kB	734.64 kB	+0.49%	158.15 kB	158.92 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.development.js	+0.36%	732.11 kB	734.74 kB	+0.49%	158.19 kB	158.96 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-dev.js	+0.36%	746.15 kB	748.83 kB	+0.50%	159.72 kB	160.52 kB
oss-stable-semver/react-test-renderer/umd/react-test-renderer.development.js	+0.36%	766.89 kB	769.64 kB	+0.49%	159.79 kB	160.58 kB
oss-stable/react-test-renderer/umd/react-test-renderer.development.js	+0.36%	766.91 kB	769.66 kB	+0.49%	159.81 kB	160.60 kB
oss-experimental/react-test-renderer/umd/react-test-renderer.development.js	+0.36%	767.02 kB	769.76 kB	+0.49%	159.85 kB	160.63 kB
facebook-www/ReactTestRenderer-dev.modern.js	+0.35%	762.39 kB	765.07 kB	+0.50%	162.92 kB	163.74 kB
facebook-www/ReactTestRenderer-dev.classic.js	+0.35%	762.39 kB	765.07 kB	+0.50%	162.92 kB	163.74 kB
react-native/implementations/ReactFabric-dev.js	+0.32%	824.71 kB	827.39 kB	+0.45%	178.69 kB	179.48 kB
react-native/implementations/ReactNativeRenderer-dev.js	+0.32%	834.25 kB	836.93 kB	+0.45%	181.14 kB	181.95 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js	+0.24%	832.78 kB	834.79 kB	+0.43%	176.56 kB	177.32 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js	+0.24%	832.80 kB	834.81 kB	+0.43%	176.58 kB	177.34 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js	+0.24%	840.61 kB	842.61 kB	+0.43%	178.03 kB	178.78 kB
facebook-www/ReactDOMTesting-dev.modern.js	+0.23%	1,180.62 kB	1,183.30 kB	+0.31%	260.94 kB	261.76 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js	+0.22%	1,180.43 kB	1,183.07 kB	+0.30%	261.29 kB	262.08 kB
facebook-www/ReactDOMTesting-dev.classic.js	+0.22%	1,210.50 kB	1,213.18 kB	+0.31%	266.77 kB	267.59 kB

Generated by 🚫 dangerJS against fe59dfe

[russelldavis]

Before this change, state initializer functions passed to useState and useReducer were called twice in strict mode. After this change, they are only called once. Which makes sense, now that state is preserved.

I assume it's intentional that they're not being manually called a second time (like useMemo callbacks), since that no longer tests something that would happen outside of strict mode? Just wanted to confirm (I didn't see it mentioned anywhere).