` inside `
` | Not applicable | Yes, as a lint step | | `eslint-plugin-hydration-proof` | Your editor and lint step | Before the code runs | 15 rules for render code: time, random values, browser globals, storage, media queries, locale and timezone formatting, unstable ids, invalid nesting, `suppressHydrationWarning` | Not applicable | Yes, as a lint step | | hydration-proof | A real browser driven by Playwright, on your machine or a CI runner | On demand, for every route | Text and structure mismatches, silent attribute mismatches, markup the browser repaired, changes made by scripts or extensions before hydration, CDN rewrites; each with a likely cause and a fix | Yes: production is the default, `--mode both` tests both | Yes: exit codes, JUnit, SARIF, GitHub and GitLab reports | The tools answer different questions. Runtime tools (the console, the overlays, Sentry, hydration-proof) see what actually differed. Lint rules see code that is likely to differ, before it runs, but nothing that happens outside your source: extensions, CDNs, or data that changed between the two renders. ## When to choose each ### The browser console and the Next.js dev overlay Use them while you work on a page. They are already there, and in development React names the component. They only cover the page you have open, and they do not run in CI. Next.js 16.2 added a hydration diff to the overlay that labels server and client content with a `+ Client` / `- Server` legend. [hydration-proof vs the Next.js dev overlay](https://hydration.jscrate.dev/docs/compare/nextjs-dev-overlay) goes into the details. ### react-hydration-overlay `@builder.io/react-hydration-overlay` (version 0.3.0) shows an overlay with a diff between the server and client renders when a hydration error happens. You wrap your app root in its component and add its plugin; it supports Next.js and webpack. Its README describes it as a beta, not intended for production use. See [hydration-proof vs react-hydration-overlay](https://hydration.jscrate.dev/docs/compare/react-hydration-overlay). ### Sentry Sentry is the one tool here that sees your real users' sessions. With Session Replay set up and a browser SDK version 7.90.0 or later, a hydration error captured in a replay has an "Open Hydration Diff" button that compares the page before and after React hydrated. It tells you a mismatch happened in production, not how to prevent the next one. See [hydration-proof vs Sentry](https://hydration.jscrate.dev/docs/compare/sentry-hydration-errors). ### ESLint rules Lint rules are the cheapest check: they run in your editor and flag the code before it ships. - The `purity` rule of `eslint-plugin-react-hooks` is part of its recommended preset, which `eslint-config-next` includes. It flags impure calls such as `Date.now()` and `Math.random()` in components and hooks. See [hydration-proof vs eslint-plugin-react-hooks](https://hydration.jscrate.dev/docs/compare/eslint-plugin-react-hooks). - `eslint-plugin-validate-jsx-nesting` (version 0.1.1) reports invalid HTML nesting in JSX. See [hydration-proof vs eslint-plugin-validate-jsx-nesting](https://hydration.jscrate.dev/docs/compare/eslint-plugin-validate-jsx-nesting). - [`eslint-plugin-hydration-proof`](https://hydration.jscrate.dev/docs/eslint) has 15 rules aimed at hydration: browser globals, storage, `matchMedia`, locale and timezone formatting, generated ids and more. ### hydration-proof Use it when you want every route checked, not only the page you have open, and the production build checked the way users get it. It runs in CI, fails the build with exit code 1, and reports the element, both values, the source line, the likely cause and a fix. It adds nothing to your app. Start with the [quick start](https://hydration.jscrate.dev/docs/quick-start), then [add it to CI](https://hydration.jscrate.dev/docs/ci). ## How the tools fit together The tools do not replace each other. A typical setup: 1. Lint rules in the editor, so the common mistakes never get written. 2. The console or the dev overlay while you build a page. 3. hydration-proof in CI, for every route and the production build. 4. Sentry in production, for what only real users' browsers show. ## Sources Claims about other tools, as of September 2026: - Next.js 16.2 release notes, "Hydration Diff Indicator": https://nextjs.org/blog/next-16-2 - Next.js, "Text content does not match server-rendered HTML": https://nextjs.org/docs/messages/react-hydration-error - Next.js ESLint plugin (`eslint-config-next` includes the `eslint-plugin-react-hooks` recommended rules): https://nextjs.org/docs/app/api-reference/config/eslint - `@builder.io/react-hydration-overlay` README: https://github.com/BuilderIO/hydration-overlay - Sentry changelog, "Diff hydration errors with Replay" (SDK 7.90.0 or later): https://sentry.io/changelog/2024-1-5-diff-hydration-errors-with-replay - Sentry changelog, hydration error diff generally available: https://sentry.io/changelog/debug-hydration-errors-with-our-diff-tool---now-generally-available - React, `purity` lint: https://react.dev/reference/eslint-plugin-react-hooks/lints/purity - React, `eslint-plugin-react-hooks` presets: https://react.dev/reference/eslint-plugin-react-hooks - `eslint-plugin-validate-jsx-nesting`: https://github.com/MananTank/eslint-plugin-validate-jsx-nesting ## Related - [How hydration-proof detects mismatches](https://hydration.jscrate.dev/docs/how-it-works) - [The ESLint plugin](https://hydration.jscrate.dev/docs/eslint) and [all its rules](https://hydration.jscrate.dev/docs/rules) - [Debug a hydration error](https://hydration.jscrate.dev/docs/guides/debug-hydration-errors) - [React hydration error FAQ](https://hydration.jscrate.dev/docs/faq)