Skip to main content
Travis Wimer
React Hydration Provider



NPM package for easily controlling what your app renders before and after app hydration.

Published / By Travis Wimer
Last updated

View project on GitHub

About this Project

react-hydration-provider is an NPM package that simplifies the process of dealing with "hydration" mismatches in React apps.

Hydration is the name for the process of starting with a pre-rendered HTML file and seamlessly initializing an identical React app. For this to work the HTML must exactly match what the app renders.

For this reason, it is sometimes necessary to remove dynamic/unpredictable content from the initial pre-hydration render to ensure that it matches the HTML from the server.

Currently React doesn't include any great method for determining whether an app has been hydrated.

react-hydration-provider solves this problem through the use of a React Context Provider that tracks the hydration status. Here is an example of how it works:

import { HydrationProvider, Server, Client } from "react-hydration-provider";
function App() {
	return (
						This will only be rendered during html generation (SSR, SSG, etc) and the initial app hydration.
					<p>This will be rendered after app hydration.</p>
					<p>It can safely contain unreliable content, like this: {Math.random()}
				<p>This will always be rendered.</p>

You can learn more about React hydration issues and react-hydration-provider in my blog post,

Easily Fix React Hydration Errors.

Tech Stack

  • React - A declarative component-based frontend JavaScript framework.
  • NPM - A package manager for Node.js.
  • TypeScript - A strongly typed programming language that builds on JavaScript.
  • Jest - A JavaScript testing framework.

Be the first to know when I post articles like this.

Follow Me On LinkedIn