Difference Between Class.contextType and Context.Consumer with working example

Question

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.

1. What is the difference in contextType and Consumer methods to consume the values provided by Provider? In what situation we should use which method?
2. 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.
3. 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.

ContextProvider.js

import React from "react";
import {ContextConsumer} from "./ContextConsumer";
export const TestContext = React.createContext({
    count: 1,
    incrCount: (count)=>{
     console.log(`count value :- ${count}`)
     }
});

export class ContextProvider extends React.Component {
  incrCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  state = {
    count: 5,
    incrCount: this.incrCount,
  };

  render() {
    return (
      <TestContext.Provider value={this.state}>
        <ContextConsumer />
      </TestContext.Provider>
    );
  }
}

ContextConsumer.js

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 (
      <div>


        **// BELOW CODE IS WORKING AS EXPECTED**
        <TestContext.Consumer>
          {({ count, incrCount }) => (
            <button onClick={incrCount}>Count is {count}</button>
          )}
        </TestContext.Consumer>
      </div>
    );
  }
}

App.js

import {ContextProvider}  from "../../playground/ContextProvider";

const output = (
  <Provider store={reduxStore}>
    <ContextProvider />
  </Provider>
);

ReactDOM.render(output, document.getElementById("root"));

Answer 1

What is the difference in contextType and Consumer methods to consume the values provided by Provider? In what situation we should use which method?

The static contextType assignment was introduced in v16.6.0 as a way to use context outside of render method. The only difference between Consumer and static context is the fact that using contextType allows you use context outside of render method too

Can the value exposed by Provider in a class based component, be used by a react hook component using useContext?

Yes the context value from Provider can be used by useContext too. However you can only make use of useContext inside a functional component and not a class component and also after v16.8.0 or react which supports hooks

P.S. You must ensure one thing that you are not causing a circular dependency by importing provider in consumer component and also the other way around

Answer 2

1. Static contextType and class.contextType
2. useContext
3. context.Consumer

are almost same the difference between them is that (1) is used in class component and useContext is a hook and the best thing is we can use this hook multiple times in one functional component.(3) can only be used in jsx or in render(return).(1)and(2) can be used outside return.