title: React Context Syntax with Typescript for Loading Spinner
body: <p>I'm trying to create a Loading context for my React app and there's always some issue.
  I need to create the context in it's own file because I have to import the context consumer.</p>
  <p>LoadingContext.ts</p>
  <pre><code>import React, { useState, createContext } from 'react';
  
  interface LoadingContextType {
      loading: boolean;
      setLoading: React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;;
  }
  
  const [loading, setLoading] = useState(false);
  const loadingValue = { loading, setLoading };
  const LoadingContext = createContext&lt;LoadingContextType&gt;(loadingValue);
  
  export default LoadingContext;
  </code></pre>
  <p>This breaks the Hook's rules.</p>
  <p>On App.tsx, I need to add these two lines again, because Provider needs value
  and if I have to repeat a code there's something wrong.</p>
  <pre><code>const [loading, setLoading] = useState(false);
  const loadingValue = { loading, setLoading };
  return (
  &lt;ThemeProvider theme={theme}&gt;
   &lt;div className='App'&gt;
     &lt;Suspense fallback={&lt;span&gt;Carregando...&lt;/span&gt;}&gt;
       &lt;Router&gt;
         &lt;Switch&gt;
           &lt;LoadingContext.Provider value={loadingValue}&gt;
             {...all routes}
  </code></pre>
  <p>And then in Home.tsx, one of the routes/sub-pages components,
  if loading is true render the Spinner that has a overlay with opacity
  and a high z-index covering everything.</p>
  <pre><code>&lt;LoadingContext.Consumer&gt;
     {(value) =&gt; (
       value.loading ? &lt;Spinner/&gt; : null
      )}
  &lt;/LoadingContext.Consumer&gt;
  {...the rest of the view}
  </code></pre>
  <p>I didn't even made the setLoading consumer part, it should be set true when api is fetching data, and false when it's done with the fetching, but I'll try this after solving this issue of course.
  Just need some ideas on how to implement this feature more easily.</p>