no-hydrate

Full Name in eslint-plugin-react-dom

react-dom/no-hydrate

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom-no-hydrate

Features

🔄

Presets

dom recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

ReactDOM.hydrate() is deprecated in React 18. This rule encourages migrating to the new hydrateRoot() API which provides better error handling and concurrent features support.

Common Violations

Invalid

import Component from "Component";
import ReactDOM from "react-dom";

ReactDOM.hydrate(<Component />, document.getElementById("app"));

Valid

import Component from "Component";
import ReactDOM from "react-dom";
import { hydrateRoot } from "react-dom/client";

hydrateRoot(document.getElementById("app"), <Component />);

Resources

• Rule Source
• Test Source

Further Reading

• React Docs: hydrate
• React Docs: hydrateRoot

See Also

• react-dom/no-render
  Replaces usage of ReactDOM.render() with createRoot(node).render().