“React has detected a change in the order of Hooks” but Hooks seem to be invoked in order

Question

I ran into this same error message in a component I was writing due to use of short-circuiting logic.

This resulted in an error:

const x = useSelector(state => state.foo);
if (!x) { return ; }
const y = useSelector(state => state.bar);

This is because when x is truthy the list of hooks has length 2, but when x is falsey the list has length 1.

To resolve the error I had to put all hook use before any early terminations.

const x = useSelector(state => state.foo);
const y = useSelector(state => state.bar);
if (!x) { return ; }