# 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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/no-deprecated" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
import ReactDOM from "react-dom";

ReactDOM.render(<App />, document.getElementById("root"));
```

{/* bad {"count": 3} */}
```jsx
import { hydrate } from "react-dom";

const { unmountComponentAtNode } = require("react-dom");

class Profile extends React.Component {
  componentWillMount() {
    this.load();
  }
}
```

Not reported:

{/* good */}
```jsx
import { createRoot } from "react-dom/client";

createRoot(document.getElementById("root")).render(<App />);

class Profile extends React.Component {
  componentDidMount() {
    this.load();
  }
}
```