contextType
property of a React class component should be specified properly
- REACT_BAD_CONTEXT_TYPE
- Error
- Medium
- react
This rule applies when the static contextType
property of a React class component is not properly specified.
The contextType
property is used to consume a context created with React.createContext()
. When the property is specified for a React class component, you can access the current value of the context using this.context
inside lifecycle methods of the component.
This rule checks the following improper usages of contexts:
- Values other than the context objects returned by
React.createContext()
are assigned to thecontextType
property. Note that you should use the context object itself, not theConsumer
orProvider
property of the context object. - Context objects are assigned to the legacy
contextTypes
property instead of thecontextType
.
In the above cases, React outputs warning messages and wrong values may be accessed at this.context
.
Noncompliant Code Example
View with compliant examples side by sideimport React from 'react';
let MyContext = React.createContext("there");
export class Example1 extends React.Component {
static contextType = MyContext.Consumer; // REACT_BAD_CONTEXT_TYPE alarm because consumer is assigned instead of context object.
render() {
return <div>Hello {this.context}</div>;
}
}
export class Example2 extends React.Component {
static contextTypes = MyContext; // REACT_BAD_CONTEXT_TYPE alarm because context object is assigned to 'contextTypes' instead of 'contextType'.
render() {
return <div>Hi {this.context}</div>;
}
}
Compliant Code Example
View with noncompliant examples side by sideimport React from 'react';
let MyContext = React.createContext("there");
export class Example1 extends React.Component {
static contextType = MyContext;
render() {
return <div>Hello {this.context}</div>;
}
}
export class Example2 extends React.Component {
static contextType = MyContext;
render() {
return <div>Hi {this.context}</div>;
}
}
Version
This rule was introduced in DeepScan 1.33.0.
See
React Warning: Example1 defines an invalid contextType. contextType should point to the Context object returned by React.createContext(). Did you accidentally pass the Context.Consumer instead?
React Warning: Example2 uses the legacy contextTypes API which was removed in React 19. Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)