Why does React SSR cause hydration errors with split static text and state values?

The error indicates that when the app hydrates, the text nodes on the client don’t line up exactly with the text content produced on the server. In this case, the server ends up with a single text node reading "count is 0", but on the client the JSX transformation produces an array of two children—one text node ("count is ") and one number (0)—and for some reason the number isn’t being reinserted during hydration.

This isn’t a bug in the JSX transform per se; instead, it’s a mismatch between how the HTML is created on the server (with adjacent text nodes coalesced) and how the client renders the resulting tree from the component function. React’s hydration algorithm sees the discrepancy as a potential bug (or symptom of different data), which is why it warns you.

How to Fix This

While there are a couple of ways to address it, the goal is to ensure that the component produces the same node structure on both the server and the client. Two common solutions are:

1. Combine the Text into a Single String

Using a template literal forces the complete text to be generated in one go:

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

This way, both server and client render exactly one text node with the fully concatenated string.

2. Wrap the Dynamic Value

Alternatively, you can wrap the dynamic part in an element to keep the structure explicit:

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

This method makes it clear where the dynamic content is rendered and prevents unexpected merging of text nodes.

Summary

React isn’t “failing” its own JSX transform—instead, the server and client output aren’t matching up due to how text nodes are split versus merged. By ensuring that your component produces an identical structure in both environments (for example, by concatenating the text explicitly), you can eliminate the hydration warning.

Remember that suppressing hydration warnings (using the suppressHydrationWarning prop) is intended as an escape hatch for unavoidable mismatches. It’s best to address the underlying cause whenever possible.