reactjs - Hydration error when text node is split between static text & state value - Stack Overflow

admin管理员组

文章数量:1226619

Using React 18.3.1, I'm trying to SSR & hydrate an app but it seems even the most basic component runs into hydration issues.

My component looks like this:

function App() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>count is {count}</button>;
}

if (typeof window !== 'undefined') {
    const target = document.getElementById('app');
    hydrateRoot(target, <App />);
}

It correctly renders into HTML, creating <div id="app"><button>count is 0</button></div> on the server. However, when it goes to hydrate, I'm left with the following hydration issue:

Warning: Text content did not match. Server: "count is 0" Client: "count is "

(using React dev mode to get a usable error message)

It seems the compiled JSX splits the text node in two, which React then trips over:

function ja() {
  const [k, O] = Bc.useState(0);

  return Pi.jsxs('button', {
    onClick: () => O(k + 1),
    children: [
      'count is ',
      k
    ]
  })
}

But I'm confused as to why this is and how I'm meant to be fixing this. Why can't React handle its own JSX transform?

Using React 18.3.1, I'm trying to SSR & hydrate an app but it seems even the most basic component runs into hydration issues.

My component looks like this:

function App() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>count is {count}</button>;
}

if (typeof window !== 'undefined') {
    const target = document.getElementById('app');
    hydrateRoot(target, <App />);
}

It correctly renders into HTML, creating <div id="app"><button>count is 0</button></div> on the server. However, when it goes to hydrate, I'm left with the following hydration issue:

Warning: Text content did not match. Server: "count is 0" Client: "count is "

(using React dev mode to get a usable error message)

It seems the compiled JSX splits the text node in two, which React then trips over:

function ja() {
  const [k, O] = Bc.useState(0);

  return Pi.jsxs('button', {
    onClick: () => O(k + 1),
    children: [
      'count is ',
      k
    ]
  })
}

But I'm confused as to why this is and how I'm meant to be fixing this. Why can't React handle its own JSX transform?

• reactjs

Share Improve this question Follow edited Feb 6 at 7:18 DarkBee 15.6k88 gold badges7070 silver badges115115 bronze badges asked Feb 6 at 7:17 Devildude4427Devildude4427 1,09511 gold badge1111 silver badges3333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

It turns out that React inserts comment nodes to support this children format, so the generated HTML should look like this instead:

<div id="app"><button>count is <!-- -->0</button></div>

However, I was using node-html-parser to generate my HTML doc, not realizing it removed comments by default. So renderToString was in fact returning the correct content but it was stripped out on my end.

本文标签： reactjsHydration error when text node is split between static text amp state valueStack Overflow