---
title: "React Uncaught Error: Minified React error #418 #423"
date: 2023-11-03T10:51:43.000Z
author: Z.SHINCHVEN
tags: [React, SSR, Hydration, Server-Side Rendering, Client-Side Rendering, hydrateRoot, hydrate]
canonical: https://atlassc.net/2023/11/03/react-uncaught-error-minified-react-error-418-423
---
<p style="display: flex; justify-content: center;">
  <img src="https://blogimgs.atlassc.net/images/spa/ssr-hydration.jpeg" alt="VLC icon" style="width: 100%; height: auto;" />
</p>

## Introduction

While developing this blog utilizing React for Server-Side Rendering (SSR) and Hydration, I encountered the following errors: Uncaught Error: Minified React error [#418](https://legacy.reactjs.org/docs/error-decoder.html/?invariant=418) and [#423](https://legacy.reactjs.org/docs/error-decoder.html/?invariant=423). These errors predominantly occur when there's a mismatch between client-side and server-side rendering, specifically when using the `hydrateRoot` function from `react-dom/client`.

## Understanding Rehydration

Rehydration is the phase where the client-side code takes over and attaches event handlers to the HTML markup initially rendered on the server. A mismatch between the client-side rendering and server-side markup often leads to the aforementioned errors.

## Addressing the Errors

Upon encountering these errors, I reverted to using the `hydrate` function from `react-dom` which resolved the issues seamlessly. Below is the change I made in the code:

```diff
import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
+import { hydrate } from 'react-dom';
import ReactDOM from 'react-dom';
import App from './App';

-hydrateRoot(
+hydrate(
-  document.getElementById('root'),
  <App />,
+  document.getElementById('root'),
);
```

## Delving Deeper into `hydrateRoot`

The `hydrateRoot` method was introduced in React version `react-dom@18.2.0`. This method facilitates displaying React components within a browser DOM node, the HTML content of which was previously generated by `react-dom/server`. The syntax to utilize `hydrateRoot` is `hydrateRoot(container, element)`, which replaced the earlier `hydrate` method exported from `react-dom/client`.

`hydrateRoot` aims at bolstering concurrency and better supporting the selective hydration process. Selective hydration is crucial for enhancing the performance, search engine optimization (SEO), and user experience (UX) of React applications employing Server-Side Rendering (SSR). The `hydrateRoot` method provides a more refined mechanism to attach React to existing HTML, initially rendered by React in a server environment, thereby allowing React to manage the DOM within the specified `domNode`.

Moreover, `hydrateRoot` necessitates that the rendered content aligns perfectly with the server-rendered content. Any discrepancies should be perceived as bugs and rectified promptly. This underscores the essence of ensuring a match between the server and client render to avert rehydration errors.

The advent of `hydrateRoot` mirrors React's progressive approach towards handling server-rendered HTML, striving to equip developers with superior tools for crafting performant, SEO-friendly, and user-centric applications.