no-unsafe-component-will-receive-props
Warns about the use of 'UNSAFE_componentWillReceiveProps' in class components.
Full Name in eslint-plugin-react-x
react-x/no-unsafe-component-will-receive-propsFull Name in @eslint-react/eslint-plugin
@eslint-react/no-unsafe-component-will-receive-propsPresets
x
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
Using unsafe lifecycle methods like UNSAFE_componentWillReceiveProps makes your component's behavior less predictable and more likely to cause bugs. Consider using getDerivedStateFromProps or componentDidUpdate instead.
Examples
Using UNSAFE_componentWillReceiveProps in class components
UNSAFE_componentWillReceiveProps is a deprecated lifecycle method. If you need to update state when props change, use the static method getDerivedStateFromProps; if you need to perform side effects, use componentDidUpdate.
// Problem: Uses an unsafe lifecycle method
import React from "react";
class MyComponent extends React.Component {
UNSAFE_componentWillReceiveProps() {
// ...
}
}// Recommended: derive state with getDerivedStateFromProps or use componentDidUpdate for side effects
import React from "react";
class MyComponent extends React.Component {
static getDerivedStateFromProps(props, state) {
if (props.userID !== state.prevUserID) {
return {
prevUserID: props.userID,
email: props.defaultEmail,
};
}
return null;
}
state = {
email: this.props.defaultEmail,
prevUserID: this.props.userID,
};
}Versions
Resources
Further Reading
- React Docs:
UNSAFE_componentWillReceiveProps - Legacy React APIs:
componentWillReceiveProps - React Docs: You Probably Don't Need Derived State
- React Docs: Updating to Async Rendering
- React Docs: How to migrate to a function component
See Also
react-x/no-unsafe-component-will-mount
Warns about the use ofUNSAFE_componentWillMountin class components.react-x/no-unsafe-component-will-update
Warns about the use ofUNSAFE_componentWillUpdatein class components.