# Fix the Next.js Hydration Error: Two Methods

Fix the Next.js hydration error by rendering only after mount with useEffect, or by using the fix-hydration npm package that wraps the same pattern.

Published: 03rd March 2024

If you have worked with or working with Next.js you have definitely came across this hydration error.

## Method 1

Simple fix for this Error is

```jsx 
const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
  setIsMounted(true);
}, []);

if (!isMounted) {
  return null;
}
```

just find the component which is causing hydration error and put this code in the beginning of the component error will be resolved.

## Method 2

Second method is you can download a npm package which do the same this as told above but take out the pain of writing code again and again.

[Link to package](https://www.npmjs.com/package/fix-hydration)

Code how this package works

```jsx showLineNumbers
import useFixHydration from "fix-hydration"

const componentinwhichHydrationerroristhere = () => {

const hasMounted=useFixHydration() 

if(!hasMounted){
 return null
}

return (<div> After hydration is fixed <div/>)

}
```

Below you can see I shifted my application code from method 1 to method 2



But you have to figure out which component is giving you hydration error and you can put this code in beginning.

If you want to read more about hydration error and how website like Airbnb also deal it with same way I taught you . You should read this article [Perils of hydration](https://www.joshwcomeau.com/react/the-perils-of-rehydration/)

[Code of the package](https://github.com/faisal004/fix-hydration)

Thank you

Original page: https://faisalhusa.in/blog/hydrationError