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 />);

Using `hydrate()` from `react-dom`

Importing hydrate directly from react-dom is also deprecated and should be migrated to hydrateRoot().

// Problem: hydrate() from react-dom is deprecated.
import { hydrate } from 'react-dom';

const container = document.getElementById('app');
hydrate(<App tab="home" />, container);

// Recommended: use hydrateRoot() from react-dom/client.
import { hydrateRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);

Rule Details

Examples

Using the deprecated `ReactDOM.hydrate()` API

Using `hydrate()` from `react-dom`

Versions

Resources

Further Reading

See Also

On this page

no-hydrate

[5.2.3-beta.0] - 2026-04-14

[1.35.0] - 2025-03-18

On this page