Reactjs, this.context is deprecated

Question

After switching to new Context API in React introduced in 16.3.0, this.context is being shown as deprecated even though the official docs tells you to use it like this:

 class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* render something based on the value of MyContext */
  }
}
MyClass.contextType = MyContext;

Answer 1

Using context API like you have used in your case is Supported before version 16.3.0 and post 16.6.0.

The API changed a bit between 16.3.0 to 16.6.0 where you need to use a Consumer render prop pattern but was later refined to support the contextType pattern to allow usage of Context in lifecycle method

If you are using the API like you mentioned above, please make sure that you are using a version of React above 16.6.0

If you are using version betwee 16.3.0 to 16.6.0, use Context like

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.props.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.props.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.props.context;
    /* ... */
  }
  render() {
    let value = this.props.context;
    /* render something based on the value of MyContext */
  }
}

export default (props) => (
   <MyContext.Consumer>
        {(context) => <MyClass {...props} context={context}/>}
   </MyContext.Consumer>
)