<p dir="auto">useContext hook have a problem. If you for example create a context like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { createContext, useState } from 'react';

export const DummyContext = createContext();

export const DummyProvider = (props) =&gt; {
    const [state1, setState1] = useState('');
    const [state2, setState2] = useState('');
    const [state3, setState3] = useState('');

    return (
        &lt;DummyContext.Provider
            value={[
                [state1, setState1],
                [state2, setState2],
                [state3, setState3]
            ]}
        &gt;
            {props.children}
        &lt;/DummyContext.Provider
    )
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s1">createContext</span><span class="pl-kos">,</span> <span class="pl-s1">useState</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-v">DummyContext</span> <span class="pl-c1">=</span> <span class="pl-en">createContext</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-v">DummyProvider</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">state1</span><span class="pl-kos">,</span> <span class="pl-s1">setState1</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">state2</span><span class="pl-kos">,</span> <span class="pl-s1">setState2</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">state3</span><span class="pl-kos">,</span> <span class="pl-s1">setState3</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">return</span> <span class="pl-kos">(</span>
        <span class="pl-c1">&lt;</span><span class="pl-v">DummyContext</span><span class="pl-kos">.</span><span class="pl-v">Provider</span>
            <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">[</span>
                <span class="pl-kos">[</span><span class="pl-s1">state1</span><span class="pl-kos">,</span> <span class="pl-s1">setState1</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-kos">[</span><span class="pl-s1">state2</span><span class="pl-kos">,</span> <span class="pl-s1">setState2</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-kos">[</span><span class="pl-s1">state3</span><span class="pl-kos">,</span> <span class="pl-s1">setState3</span><span class="pl-kos">]</span>
            <span class="pl-kos">]</span><span class="pl-kos">}</span>
        <span class="pl-c1">&gt;</span>
            <span class="pl-kos">{</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">DummyContext</span><span class="pl-kos">.</span><span class="pl-v">Provider</span><span class="pl-c1"></span>
    <span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Let's say I have also wrote something like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function App() {
  return (
    &lt;DummyProvider&gt;
      &lt;SomeComponent/&gt;
    &lt;/DummyProvider&gt;
  );
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-v">App</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">DummyProvider</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">SomeComponent</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">DummyProvider</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">If I want to use that context inside SomeComponent, I will have to call those states and handlers in the exact order I have wrote inside DummyContext, because it seems React is looking for states and handlers by their index, instead of the name. If I don't use those states and handlers in the exact order, values will get mixed.</p>
<p dir="auto">Other issue with that is that I can't call only handler for that state, but I also have to include that state even tho I might not use that state inside that component, but only that state handler. If I only include handler, it will give me error like 'handler is not a function', if we say that handler is the name of the actual handler.</p>
<p dir="auto">Wouldn't it be better if it looks for those states by their name (since there can't be duplicate states in the context), so I would be able to include only those states I want from the context? Less code and it would be easier to maintain that code.</p>
<p dir="auto">I suddenly couldn't build my react project. This error seems to appear for many people.</p>
<ul dir="auto">
<li><a href="https://stackoverflow.com/questions/52339225/react-typescript-2312-14-duplicate-identifier-librarymanagedattributes" rel="nofollow">https://stackoverflow.com/questions/52339225/react-typescript-2312-14-duplicate-identifier-librarymanagedattributes</a></li>
<li><a href="https://stackoverflow.com/questions/52323056/typescript-error-duplicate-identifier-librarymanagedattributes" rel="nofollow">https://stackoverflow.com/questions/52323056/typescript-error-duplicate-identifier-librarymanagedattributes</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="349280754" data-permission-text="Title is private" data-url="https://github.com/ant-design/ant-design/issues/11697" data-hovercard-type="issue" data-hovercard-url="/ant-design/ant-design/issues/11697/hovercard" href="https://github.com/ant-design/ant-design/issues/11697">ant-design/ant-design#11697</a></li>
<li><a href="https://stackoverflow.com/questions/52399839/typescript-duplicate-identifier-librarymanagedattributes" rel="nofollow">https://stackoverflow.com/questions/52399839/typescript-duplicate-identifier-librarymanagedattributes</a></li>
</ul>
<p dir="auto"><code class="notranslate">yarn build</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Failed to compile.

C:/dev/project/frontend/node_modules/@types/prop-types/node_modules/@types/react/index.d.ts
(2312,14): Duplicate identifier 'LibraryManagedAttributes'.

error Command failed with exit code 1."><pre class="notranslate"><code class="notranslate">Failed to compile.

C:/dev/project/frontend/node_modules/@types/prop-types/node_modules/@types/react/index.d.ts
(2312,14): Duplicate identifier 'LibraryManagedAttributes'.

error Command failed with exit code 1.
</code></pre></div>
<p dir="auto">It looks like <code class="notranslate">LibraryManagedAttributes</code> is defined in the following files:</p>
<ul dir="auto">
<li><code class="notranslate">node_modules/@types/react/index.d.ts</code></li>
<li><code class="notranslate">node_modules/@types/prop-types/node_modules/@types/react/index.d.ts</code></li>
<li><code class="notranslate">node_modules/@types/react-overlays/node_modules/@types/react/index.d.ts</code></li>
<li>....</li>
</ul>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">No error.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;@types/react&quot;: &quot;^16.4.14&quot;,
&quot;@types/react-dom&quot;: &quot;^16.0.7&quot;,
&quot;@types/prop-types&quot;: &quot;^15.5.5&quot;,
&quot;react&quot;: &quot;^16.5.2&quot;,
&quot;react-dom&quot;: &quot;^16.5.2&quot;,
&quot;prop-types&quot;: &quot;^15.6.2&quot;,"><pre class="notranslate"><code class="notranslate">"@types/react": "^16.4.14",
"@types/react-dom": "^16.0.7",
"@types/prop-types": "^15.5.5",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"prop-types": "^15.6.2",
</code></pre></div>