Don't understand why I'm getting "Rendered fewer hooks than expected"

[jmbldwn]

I made a custom hook using useQuery so my components can determine if the user is authenticated:

export const useAuthenticated = () =>
    useQuery('authenticated', async () => {
        return localStorage.getItem('user-session') !== null;
    });

I attached an error handler to every API call that checks to see if the status code is 401, which would imply I am no longer authenticated. When that happens, I clear out my user session and invalidate the authenticated query:

const on401 = () => {
    localStorage.removeItem('user-session');
    queryCache.invalidateQueries('authenticated');
}

One place I am using is in the Home component, where i redirect to /login if not authenticated:

    const { data: authenticated } = useAuthenticated();
...
    if (!authenticated) {
        console.log('not authenticated. going to login');
        return (<Redirect to="/login" />);
    }
    return (<Home Components...>);

I would expect this to work, of course. But instead when on401 invalidates the query, I get the exception Rendered fewer hooks than expected... pointing me at code where i am doing the redirect.

I have no hooks defined after that check, so I don't understand why I am getting this error.

It leads me to believe it could have something to do with when I am invalidating the query. Are there rules about when I can call queryCache.invalidateQueries?

[jmbldwn]

Here's a stack trace from one of the exceptions:

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
  | renderWithHooks | @ | react-dom.development.js:14868
-- | -- | -- | --
  | updateFunctionComponent | @ | react-dom.development.js:17034
  | beginWork | @ | react-dom.development.js:18610
  | callCallback | @ | react-dom.development.js:188
  | invokeGuardedCallbackDev | @ | react-dom.development.js:237
  | invokeGuardedCallback | @ | react-dom.development.js:292
  | beginWork$1 | @ | react-dom.development.js:23203
  | performUnitOfWork | @ | react-dom.development.js:22154
  | workLoopSync | @ | react-dom.development.js:22130
  | performSyncWorkOnRoot | @ | react-dom.development.js:21756
  | (anonymous) | @ | react-dom.development.js:11089
  | unstable_runWithPriority | @ | scheduler.development.js:653
  | runWithPriority$1 | @ | react-dom.development.js:11039
  | flushSyncCallbackQueueImpl | @ | react-dom.development.js:11084
  | flushSyncCallbackQueue | @ | react-dom.development.js:11072
  | scheduleUpdateOnFiber | @ | react-dom.development.js:21199
  | dispatchAction | @ | react-dom.development.js:15660
  | (anonymous) | @ | utils.ts:52
  | setTimeout (async) |   |  
  | (anonymous) | @ | utils.ts:74
  | Promise.catch (async) |   |  
  | scheduleMicrotask | @ | utils.ts:72
  | (anonymous) | @ | utils.ts:50
  | (anonymous) | @ | utils.ts:64
  | (anonymous) | @ | useBaseQuery.ts:26
  | onQueryUpdate | @ | queryObserver.ts:246
  | (anonymous) | @ | query.ts:149
  | dispatch | @ | query.ts:149
  | setData | @ | query.ts:273
  | (anonymous) | @ | query.ts:491
  | Promise.then (async) |   |  
  | _invoke | @ | query.ts:549
  | (anonymous) | @ | query.ts:481
  | _catch$1 | @ | query.ts:565
  | (anonymous) | @ | query.ts:480
  | (anonymous) | @ | query.ts:77
  | fetch | @ | query.ts:480
  | (anonymous) | @ | queryCache.ts:184
  | (anonymous) | @ | queryCache.ts:179
  | _catch$2 | @ | queryCache.ts:565
  | invalidateQueries | @ | queryCache.ts:175
  | endSession | @ | session.js:80
  | errorCheck | @ | session.js:19
  | getProfile | @ | user.js:26
  | async function (async) |   |  
  | getProfile | @ | user.js:20
  | fetchData | @ | query.ts:527
  | (anonymous) | @ | query.ts:404
  | _catch$1 | @ | query.ts:565
  | (anonymous) | @ | query.ts:401
  | (anonymous) | @ | query.ts:77
  | (anonymous) | @ | query.ts:458
  | tryFetchData | @ | query.ts:361
  | startFetch | @ | query.ts:535
  | (anonymous) | @ | query.ts:481
  | _invoke | @ | query.ts:547
  | (anonymous) | @ | query.ts:481
  | _catch$1 | @ | query.ts:565
  | (anonymous) | @ | query.ts:480
  | (anonymous) | @ | query.ts:77
  | fetch | @ | query.ts:480
  | onWindowFocus | @ | query.ts:304
  | (anonymous) | @ | queryCache.ts:365
  | getQueries | @ | queryCache.ts:145
  | (anonymous) | @ | queryCache.ts:361
  | onVisibilityOrOnlineChange | @ | queryCache.ts:360
  | (anonymous) | @ | setFocusHandler.ts:4

[jmbldwn]

This turned out to be caused by a seemingly unrelated component, where i was passing in a function that used useQuery (not part of a component).

Makes me wonder if there's a way to root out places where we are violating the rules of hooks...