How to fix Extra attributes from the server: data-reactroot, data-reactid in React

What this error means

This warning appears when React's hydration process detects a mismatch between the server-rendered HTML and the client-side React tree. Specifically, the server-rendered markup contains HTML attributes that the client doesn't recognize or expect. In React versions before 16, React automatically added internal attributes like data-reactroot (to mark the root element) and data-reactid (to uniquely identify each component in the tree). These attributes helped React reconcile the DOM during hydration. However, React 16 removed data-reactid entirely, and modern versions no longer add data-reactroot in most cases. If you're seeing this warning in a modern React application, it typically means you're either using an outdated version of React, have a mismatch between your server and client React versions, or browser extensions are injecting unexpected attributes into your HTML. The warning won't break your application, but it indicates that React had to do extra work during hydration, which can impact performance.

Typical symptoms

• Warning message in browser console: "Extra attributes from the server: data-reactroot, data-reactid"
• Application still functions normally but shows hydration warnings
• May see additional attributes like data-reactroot="" on your root element
• Warning appears only on initial page load, not on client-side navigation
• Performance may be slightly degraded during hydration

Common causes

1. Using React 15 or earlier on the server with React 16+ on the client
2. Mismatch between server-side and client-side React versions
3. Browser extensions (like Grammarly, password managers) injecting attributes into the DOM
4. Using ReactDOM.render() instead of ReactDOM.hydrate() for server-rendered content
5. Outdated build tools or bundler configuration serving old React builds
6. Custom server rendering that manually adds React internal attributes

How to fix "Extra attributes from the server: data-reactroot, data-reactid"

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

rm -rf node_modules package-lock.json
npm install

// React 16-17
import ReactDOM from 'react-dom';
import App from './App';

const rootElement = document.getElementById('root');
ReactDOM.hydrate(<App />, rootElement);

// React 18+
import { hydrateRoot } from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
hydrateRoot(rootElement, <App />);

<html suppressHydrationWarning>
  <body suppressHydrationWarning>
    {children}
  </body>
</html>

npm install react@latest react-dom@latest

rm -rf .next  # Next.js
rm -rf build  # Create React App

import { renderToStaticMarkup } from 'react-dom/server';

// This doesn't add any React attributes
const html = renderToStaticMarkup(<App />);

import { renderToString } from 'react-dom/server';

// This adds minimal attributes needed for hydration
const html = renderToString(<App />);

Advanced notes

Frequently asked questions

What does "Extra attributes from the server: data-reactroot, data-reactid" mean?

This warning appears when React's hydration process detects a mismatch between the server-rendered HTML and the client-side React tree. Specifically, the server-rendered markup contains HTML attributes that the client doesn't recognize or expect. In React versions before 16, React automatically added internal attributes like data-reactroot (to mark the root element) and data-reactid (to uniquely identify each component in the tree).

How do I fix "Extra attributes from the server: data-reactroot, data-reactid"?

This warning occurs during React hydration when server-rendered HTML contains attributes that the client-side code doesn't expect. In older React versions (pre-16), data-reactroot and data-reactid were internal attributes used by React. Modern React has removed these attributes, but the warning can still appear due to browser extensions or version mismatches.

What causes "Extra attributes from the server: data-reactroot, data-reactid"?

Using React 15 or earlier on the server with React 16+ on the client Mismatch between server-side and client-side React versions Browser extensions (like Grammarly, password managers) injecting attributes into the DOM

Is the "Extra attributes from the server: data-reactroot, data-reactid" error serious?

It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• React.FC expects children prop to be defined

  React.FC no longer includes implicit children prop

  LOW

• ReferenceError: exports is not defined

  ReferenceError: exports is not defined

  MEDIUM

• Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

  Rendered fewer hooks than expected

  HIGH

• export 'Component' (imported as 'Component') was not found in 'module'

  Export was not found in module

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation