Failing test: Switch between zero and non-zero Hooks

[gaearon]

Rendering Hooks conditionally is not supported. Linter enforces this.

However, people sometimes forget to use the linter. We should hard-error in this case. See #24391 for an example.

It looks like we hard-error when the number of Hooks changed, but not between 0 Hooks and non-0 Hooks. This adds failing tests that show the issue.

[sizebot]

Comparing: bd4784c...86e6b0e

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.56 kB	131.56 kB	=	42.11 kB	42.11 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	136.83 kB	136.83 kB	=	43.69 kB	43.69 kB
facebook-www/ReactDOM-prod.classic.js	=	441.15 kB	441.15 kB	=	80.48 kB	80.48 kB
facebook-www/ReactDOM-prod.modern.js	=	426.40 kB	426.40 kB	=	78.28 kB	78.28 kB
facebook-www/ReactDOMForked-prod.classic.js	=	441.15 kB	441.15 kB	=	80.48 kB	80.48 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 86e6b0e

[gaearon]

I suspect this check is the reason:

react/packages/react-reconciler/src/ReactFiberHooks.new.js

Lines 407 to 411 in bd4784c

	// Using memoizedState to differentiate between mount/update only works if at least one stateful hook is used.
	// Non-stateful hooks (e.g. context) don't get added to memoizedState,
	// so memoizedState would be null during updates and mounts.
	if (__DEV__) {
	if (current !== null && current.memoizedState !== null) {

Because of it, we end up using the "mount" dispatcher during an update.

[gaearon]

I did a bit of experimentation to see how the hookTypesDev logic works today.

Each group corresponds to one mount -> update case. [] means which Hooks were used. s is useState, c is useContext. mount, update, mount_with_checks corresponds to chosen dispatchers. For each group, the second line shows how hookTypesDev is filled before/after render, and whether the check is ok or error.

([]->[]):      mount([])         ->    mount([])   
               null->null                ok



([s]->[s]):     mount([s])    ->       update([s])
                 null->[s]                 ok     



([]->[s]):       mount([])              mount([s])
                null->null               null->[s] 
                                  ^^^ this should error ^^^



([s]->[]):     mount([s])           update([])
                null->[s]               ok
                               ^^^ this should error ^^^



([s]->[s,s]):      mount([s])            update([s,s])
                    null->[s]               error



([s,s]->[s]):        mount([s,s])        update([s])
                     null->[s,s]            error 



([]->[c]):         mount([])              mount([c])
                   null->null             null->[c]
                                    ^^^ this should error ^^^



([c]->[]):        mount([c])          mount_with_checks([])
                    null->[c]               ok
                                    ^^^ this should error ^^^



([s]->[s,c]):        mount([s])          update([s,c])
                    null->[s]               error



([s,c]->[s]):        mount([s,c])          update([s])
                      null->[s,c]               ok
                                        ^^^ this should error ^^^

[rickhanlonii]

Possible fix here: #24535