<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Not sure if it is a bug or a feature yet. This relates to Hooks.</p>
<p dir="auto">It could also be that this is all expected behaviour and one of the workarounds mentioned is required.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">I have a hook that depends on the <code class="notranslate">useContext</code> hook. Using it as follows works perfectly:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const MyHookedComponent = () =&gt; {
    const contextValue = useContext(DemoContext);

    return (
       //Do something with contextValue
    )
}

const MyContextProviderComponent = () =&gt; {

   return (
        &lt;DemoContext.Provider value={someContextValue}&gt;
                &lt;MyHookedComponent /&gt;
         &lt;/DemoContext.Provider&gt;
   )
}"><pre class="notranslate"><code class="notranslate">const MyHookedComponent = () =&gt; {
    const contextValue = useContext(DemoContext);

    return (
       //Do something with contextValue
    )
}

const MyContextProviderComponent = () =&gt; {

   return (
        &lt;DemoContext.Provider value={someContextValue}&gt;
                &lt;MyHookedComponent /&gt;
         &lt;/DemoContext.Provider&gt;
   )
}
</code></pre></div>
<p dir="auto">What if I want to use the <code class="notranslate">getContext</code> hook inline in the same component that declares the <code class="notranslate">DemoContext.Provider</code> ?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const MyContextProviderComponent = () =&gt; {
       const contextValue = useContext(DemoContext); //Of course this fails due to the Context hierarchy.
   return (
        &lt;DemoContext.Provider value={someContextValue}&gt;
                     //Do something with contextValue
         &lt;/DemoContext.Provider&gt;
   )
}"><pre class="notranslate"><code class="notranslate">const MyContextProviderComponent = () =&gt; {
       const contextValue = useContext(DemoContext); //Of course this fails due to the Context hierarchy.
   return (
        &lt;DemoContext.Provider value={someContextValue}&gt;
                     //Do something with contextValue
         &lt;/DemoContext.Provider&gt;
   )
}
</code></pre></div>
<p dir="auto">I seem to be unable to get this working.</p>
<p dir="auto"><strong>Please note</strong>:</p>
<ul dir="auto">
<li>I have a very good reason for solving my issue with Context and not passing props.</li>
<li>The implementation I show above looks trivial and dumb but it is the simplest way to illustrate what the use case is. In my implementation the <code class="notranslate">Provider</code> sits in a complex component that does a lot of data management which I really want to happen at this level.</li>
<li>The usual way to use this will be the first working version I noted above, it is only in the case where the user would want to use the hook inline inside the <code class="notranslate">Provider</code>.</li>
<li>I have searched for a couple of hours and tried various configurations without success, so my apologies if this is a duplicate of another issue.</li>
</ul>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Any method to consume context inline in the provider using the same re-usable hook without having to revert back to render props.</p>
<p dir="auto">I know I can solve this with <strong>render props</strong> but I am trying to convert an implementation using render props to hooks. I also know I can hoist the Context Provider higher up but in my implementation it would quadruple the code complexity to develop and maintain while introducing extra complexity into the user interface.</p>
<p dir="auto">Also, by extracting the body inside the <code class="notranslate">Provider</code> to a new component I can also solve this but ideally I would not like to have a user do this for this use case.</p>
<h1 dir="auto">From maintainers: if you have this problem, please see the explanation in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="157049204" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/6895" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/6895/hovercard?comment_id=281405036&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/6895#issuecomment-281405036">#6895 (comment)</a>.</h1>
<p dir="auto">I am getting a strange error I've never come across. Googling it doesn't help at all.<br>
<code class="notranslate">Error: performUpdateIfNecessary: Unexcpeted batch number (current 36, pending 31)(...)</code><br>
It has caused me a lot of headaches. I've reverted to 2 days ago and the error persists, even though 2 days ago everything was running smoothly and all tests were passing.</p>
<p dir="auto">I would appreciate any sort of direction as to how I can begin to resolve this bug. My guesses are that it's an error with Redux, Webpack, Redux-Form, or React itself. I know, not that precise, but I'm quite lost.</p>
<hr>
<p dir="auto">Example redux logger information:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/8007686/15585614/f6ef14e8-2334-11e6-9c44-a9380b028707.png"><img src="https://cloud.githubusercontent.com/assets/8007686/15585614/f6ef14e8-2334-11e6-9c44-a9380b028707.png" alt="screen shot 2016-05-26 at 11 18 43 am" style="max-width: 100%;"></a></p>
<p dir="auto">Max OS X, El Capitan 10.11.5<br>
React v15.0.1 (error persists on v15.1.0)</p>
<p dir="auto"><em>I'm sorry if this isn't specific to React. I did look into the error message code and it appears to be coming from the Facebook/React code.</em></p>
<p dir="auto">Thanks!</p>