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.

Examples

Using the deprecated ReactDOM.hydrate() API

In React 18, ReactDOM.hydrate() is deprecated in favor of hydrateRoot().

// Problem: ReactDOM.hydrate() is deprecated.
import Component from "Component";
import ReactDOM from "react-dom";

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

// Recommended: use hydrateRoot() for better error handling and concurrent features.
import Component from "Component";
import ReactDOM from "react-dom";
import { hydrateRoot } from "react-dom/client";

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

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• React Docs: hydrate
• React Docs: hydrateRoot

See Also

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