title: Why are these tuple types conjoined?
body: <p>I have recreated the error I'm getting in a brandnew Create-React-App repo, source code can be found <a href="https://github.com/JDansercoer/TSTest" rel="nofollow noreferrer">here</a>.</p>
  <p>As you can see in <a href="https://github.com/JDansercoer/TSTest/blob/master/src/MyContext.tsx" rel="nofollow noreferrer">MyContext.tsx</a>, I'm simply adding the result of <code>useState</code> to my context. The type of the context is also defined as a tuple by</p>
  <pre><code>const UDContext = createContext&lt;
    | undefined
    | [
        UserData | undefined,
        React.Dispatch&lt;React.SetStateAction&lt;UserData | undefined&gt;&gt;
      ]
  &gt;(undefined);
  </code></pre>
  <p>However, when I try to access the data in <a href="https://github.com/JDansercoer/TSTest/blob/master/src/MyComponent.tsx" rel="nofollow noreferrer">MyComponent.tsx</a> by doing</p>
  <pre><code>  const [userData] = useUserData();
  </code></pre>
  <p>I'm getting the error</p>
  <pre><code>Property 'username' does not exist on type 'UserData | Dispatch&lt;SetStateAction&lt;UserData | undefined&gt;&gt;'.
  </code></pre>
  <p>This to me looks like it is somehow combining the tuple's types to one?</p>
  <p>The funny thing: the below code does actually work (it does give a warning that <code>context</code> may be undefined, which indeed makes sense).</p>
  <pre><code>  const context = useUserData();
    const userData = context[0];
  </code></pre>
  <p>Exactly the same is happening in <a href="https://github.com/JDansercoer/TSTest/blob/master/src/MySetter.tsx" rel="nofollow noreferrer">MySetter.tsx</a>, where the exact error is</p>
  <pre><code>Not all constituents of type 'UserData | Dispatch&lt;SetStateAction&lt;UserData | undefined&gt;&gt;' are callable.
  </code></pre>
  <p>The above &quot;solution&quot; without direct destructuring works here as well.</p>
  <p>The only way I can get this to work, is by <a href="https://github.com/JDansercoer/TSTest/blob/master/src/MyContext.tsx#L31" rel="nofollow noreferrer">explicitly declaring the type</a> of the return value of <code>useUserData</code>.</p>
  <p><strong>A few sidenotes:</strong></p>
  <ul>
  <li>This is the <code>@next</code> version of Create-React-App</li>
  <li>I had to enable <code>--downlevelIteration</code>, or else the destructuring of <code>useUserData()</code> was giving <code>Type '[UserData | undefined, Dispatch&lt;SetStateAction&lt;UserData | undefined&gt;&gt;] | undefined' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.</code></li>
  <li>I have a <a href="https://codesandbox.io/s/restless-frog-5gk06?file=/src/App.tsx" rel="nofollow noreferrer">working example in CodeSandbox</a> that gives no issues at all.</li>
  </ul>