hydration failed because the initial ui does not match what was rendered on the server.?

Posted on by ahmed mustafa
hydration failed because the initial ui does not match what was rendered on the server.?

This is a common error when using React with Server Side Rendering (SSR) or any another type of pre-generated HTML.

Fortunately, the fix is fairly simple, and I also published an NPM package that can help make the solution even easier.

As the error suggests, this problem occurs when the HTML from the server does not match what the client-side is trying to render.

This can happen any time you have dynamic text. For example, if you are rendering dates or times, different environment may return different results:

function MyComponent() {

const date = new Date();

return <time>{date}</time>;}

hydration failed because the initial ui does not match what was rendered on the server.?

This code is dependent on the current time. Since the pre-rendered HTML and the client-side app are rendering at different times, the time returned by new Date() will be different.

React “Hydration” only cares that the content matches during the very first render. After that we can change anything we want without issues.

So one option is to simply remove the content from the first render:

export default function MyComponent() {

const [initialRenderComplete, setInitialRenderComplete] = React.useState(false);

​

// This useEffect will only run once, during the first render

React.useEffect(() => {

// Updating a state causes a re-render

setInitialRenderComplete(true);

}, []);

​

// initialRenderComplete will be false on the first render and true on all following renders

if (!initialRenderComplete) {

// Returning null will prevent the component from rendering, so the content will simply be missing from

// the server HTML and also wont render during the first client-side render.

return null;

} else {

const date = new Date();

return <time>{date}</time>;

}

}

Of course, you don’t have to return null. You can still render something if you’d like, you just need to ensure it does not contain any dynamic values.

This is a simple solution, but there are also potential pitfalls. If you would like to learn more about React Hydration errors, you can read my other blog post:

What is a hydration error?

When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch. In general this means the application has to follow the Next.js example for the library. For example if pages/_document is missing and the Babel plugin is not added.

error: text content does not match server-rendered html.

Leave a Reply