title: v16.6.0 or higher Context API not working when child is used in component that provides the context
body: <p>I'am using the new context API of react (v16.6.0 or higher) by declaring the <code>public static contextType</code> inside the component that consumes the context.
  This is working fine as long as the component that declares the <code>Provider</code> does not directly use a component that consumes the context in it's <code>render()</code> method.</p>
  
  <p><strong>Example:</strong></p>
  
  <p><strong>ParentWithContext</strong></p>
  
  <p>This is the component that creates and provides the context.</p>
  
  <pre><code>export const SomeContext = React.createContext({
    someValue: false
  });
  
  export default class ParentWithContext extends Component {
    public render(){
      const contextValue = {someValue: true};
      return (
        &lt;SomeContext.Provider value={contextValue}&gt;
          &lt;ChildOne /&gt;
          {this.props.children}
        &lt;/SomeContext.Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>Notice that this component uses <code>ChildOne</code> component (s. right below) in it's <code>render()</code> method.</p>
  
  <p><strong>ChildOne</strong> and <strong>ChildTwo</strong></p>
  
  <p>These two components simply consume the above context and display it.</p>
  
  <pre><code>export default class ChildOne extends Component {
    public static contextType = SomeContext;
    public render(){
      return (
        &lt;div&gt;
          {`Context of ChildOne: ${this.context.someValue}`}
        &lt;/div&gt;
      );
    }
  }
  
  export default class ChildTwo extends Component {
    public static contextType = SomeContext;
    public render(){
      return (
        &lt;div&gt;
          {`Context of ChildTwo: ${this.context.someValue}`}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>index.tsx</strong></p>
  
  <pre><code>class App extends Component {
  
    render() {
      return (
        &lt;ParentWithContext&gt;
          &lt;ChildTwo /&gt;
          &lt;ChildOne /&gt;
        &lt;/ParentWithContext&gt;
      );
    }
  }
  </code></pre>
  
  <p>Running this example will produce following lines:</p>
  
  <pre><code>Context of ChildOne: undefined
  Context of ChildTwo: true
  Context of ChildOne: undefined
  </code></pre>
  
  <p>So <code>ChildTwo</code> seems to receive the correct information from <code>this.context</code>, while <code>ChildOne</code> receives nothing.</p>
  
  <p>Now comes the weird part (to me): When you remove the <code>&lt;ChildOne/&gt;</code> from <code>ParentWithContext</code> it suddenly works for both <code>ChildOne</code> and <code>ChildTwo</code></p>
  
  <p><strong>New ParentWithContext</strong></p>
  
  <pre><code>export default class ParentWithContext extends Component {
    public render(){
      const contextValue = {someValue: true};
      return (
        &lt;SomeContext.Provider value={contextValue}&gt;
          {this.props.children}
        &lt;/SomeContext.Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>New HTML output</strong></p>
  
  <pre><code>Context of ChildTwo: true
  Context of ChildOne: true
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/react-ts-8pdvte?file=index.tsx" rel="nofollow noreferrer">Running Code</a></p>
  
  <p><strong>Question</strong></p>
  
  <p>Why is the context API (>=v16.6) not working (using <code>static contextType</code>) when the <code>Provider</code> component directly uses a child component that consumes the context in it's <code>render()</code> function? Is this a bug or a known limitation? Did I miss something? </p>
  
  <p><strong>Additonal information</strong></p>
  
  <p>Using <code>&lt;SomeContext.Consumer&gt;</code> will work as expected.</p>
  
  <pre><code>export default class ChildOne extends Component {
    public render(){
      return (
        &lt;SomeContext.Consumer&gt;
          {context =&gt;
            &lt;div&gt;
            {`Context of ChildOne: ${context.someValue}`}
            &lt;/div&gt;
          }
        &lt;/SomeContext.Consumer&gt;
      );
    }
  }
  </code></pre>
  
  <p>Of course  it's not a solution for this issue but might be a useful information.</p>