title: Difference Between Class.contextType and Context.Consumer with working example
body: <p>I am trying to understand the React context API and was going through the official docs. I will appreciate if someone can throw some more light on the following points as the official doc does not address it clearly.</p>
  
  <ol>
  <li>What is the difference in contextType and Consumer methods to
  consume the values provided by Provider? In what situation we should
  use which method?</li>
  <li>Can the value exposed by Provider in a class based component, be
  used by a react hook component using useContext? I had the same
  setup and i ended up converting the useContext to Context.Consumer.</li>
  <li>I have a very straightforward setup in which i have a Provider Class
  based component which is exposing some state values. The Provider
  has only one children component which is also a consumer. When i use
  Context.Consumer in the children to fetch the values, everything
  works as expected. But when i use contextType in the children
  component, i see an empty object.</li>
  </ol>
  
  <p>ContextProvider.js</p>
  
  <pre><code>import React from "react";
  import {ContextConsumer} from "./ContextConsumer";
  export const TestContext = React.createContext({
      count: 1,
      incrCount: (count)=&gt;{
       console.log(`count value :- ${count}`)
       }
  });
  
  export class ContextProvider extends React.Component {
    incrCount = () =&gt; {
      this.setState({
        count: this.state.count + 1,
      });
    };
  
    state = {
      count: 5,
      incrCount: this.incrCount,
    };
  
    render() {
      return (
        &lt;TestContext.Provider value={this.state}&gt;
          &lt;ContextConsumer /&gt;
        &lt;/TestContext.Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>ContextConsumer.js</p>
  
  <pre><code>import React from "react";
  import { TestContext } from "./ContextProvider";
  
  export class ContextConsumer extends React.Component {
      static contextType=TestContext
  
    componentDidMount() {
          const {count,incrCount}= this.context;
          console.log(`count:- ${(count)}`)
          console.log(`incrCount:- ${incrCount}`)
      }
    render() {
  
  
      return (
        &lt;div&gt;
  
  
          **// BELOW CODE IS WORKING AS EXPECTED**
          &lt;TestContext.Consumer&gt;
            {({ count, incrCount }) =&gt; (
              &lt;button onClick={incrCount}&gt;Count is {count}&lt;/button&gt;
            )}
          &lt;/TestContext.Consumer&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import {ContextProvider}  from "../../playground/ContextProvider";
  
  const output = (
    &lt;Provider store={reduxStore}&gt;
      &lt;ContextProvider /&gt;
    &lt;/Provider&gt;
  );
  
  ReactDOM.render(output, document.getElementById("root"));
  </code></pre>