react/no-deprecated
Disallow React APIs that are deprecated
React warns about a deprecated API for a while and then removes it. ReactDOM.render logs a warning in React 18 and no longer exists in React 19, so code that still calls it breaks on upgrade. The report names the version that deprecated the API and what to use instead.
Some of the APIs the rule knows:
| Deprecated | Since | Use |
|---|---|---|
ReactDOM.render, ReactDOM.hydrate | 18.0.0 | createRoot, hydrateRoot |
ReactDOM.unmountComponentAtNode | 18.0.0 | root.unmount |
ReactDOMServer.renderToNodeStream | 18.0.0 | renderToPipeableStream |
componentWillMount, componentWillReceiveProps, componentWillUpdate | 16.9.0 | the same name with UNSAFE_ in front |
React.DOM | 15.6.0 | the react-dom-factories package |
React.PropTypes, React.createClass | 15.5.0 | the prop-types and create-react-class packages |
The rule checks member access, named imports and destructuring from require().
If you set settings.react.version ([lint.settings.react] in bunfig.toml, or settings in an ESLint config), an API that was deprecated in a later version isn't reported. Without that setting, the rule reports everything it knows.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"react/no-deprecated" = "error" # or "warn"Examples#
Reported:
import ReactDOM from "react-dom";
ReactDOM.render(<App />, document.getElementById("root"));import { hydrate } from "react-dom";
const { unmountComponentAtNode } = require("react-dom");
class Profile extends React.Component {
componentWillMount() {
this.load();
}
}Not reported:
import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")).render(<App />);
class Profile extends React.Component {
componentDidMount() {
this.load();
}
}