React - Rendered more hooks than during the previous render

I can't seem to figure why I'm seeing the following error - well, what it actually means:

I have this query I'm making with react-apollo

import { GET_SUBSCRIPTION_BY_ID } from '../queries/GetSubscription';
import { useQuery } from 'react-apollo';

const { loading: loadingSub, error: errorSub, data: dataSub } = useQuery(GET_SUBSCRIPTION_BY_ID)
console.log(loadingSub) //I see true printed, then false

if (loadingSub === false) {
   return <Spinner />
}

So if its in a loading state - I just want the spinner to appear and not to worry about the rest of the code in the component. However I don't feel this actually happens hence I could the error - I guess the code is continuing.

Additionally in the console I see the following:

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useContext                 useContext
3. useReducer                 useReducer
4. useRef                     useRef
5. useRef                     useRef
6. useEffect                  useEffect
7. useEffect                  useEffect
8. undefined                  useEffect
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

I guess that step 8 is where the problem is? But what is that undefined?

Could someone please confirm and how I can resolve.

Thanks.