[Solved] React 18: Hydration failed because the initial UI does not match what was rendered on the server

We Are Going To Discuss About React 18: Hydration failed because the initial UI does not match what was rendered on the server. So lets Start this React Article.

React 18: Hydration failed because the initial UI does not match what was rendered on the server

  1. [Solved] React 18: Hydration failed because the initial UI does not match what was rendered on the server

    I'm happy to attempt to answer this question. The answer is special because it's my first time dropping an answer here. This community has helped me significantly and i mean significantly so i guess i have an obligation to participate.

  2. Hydration failed because the initial UI does not match what was rendered on the server

    I'm happy to attempt to answer this question. The answer is special because it's my first time dropping an answer here. This community has helped me significantly and i mean significantly so i guess i have an obligation to participate.

Solution 1

I’m happy to attempt to answer this question. The answer is special because it’s my first time dropping an answer here. This community has helped me significantly and i mean significantly so i guess i have an obligation to participate.

Well, I have been experiencing the same problem lately with NextJS and i am not sure if my observations are applicable to other libraries. I had been wrapping my components with an improper tag that is, NextJS is not comfortable having a p tag wrapping your divs, sections etc so it will yell “Hydration failed because the initial UI does not match what was rendered on the server”. So I solved this problem by examining how my elements were wrapping each other. With material UI you would need to be cautious for example if you use a Typography component as a wrapper, the default value of the component prop is “p” so you will experience the error if you don’t change the component value to something semantic. So in my own opinion based on my personal experience the problem is caused by improper arrangement of html elements and to solve the problem in the context of NextJS one will have to reevaluate how they are arranging their html element.

import Image from 'next/image'
/**
 * This might give that error
 */
export const IncorrectComponent = ()=>{
  return(
    <p>
      <div>This is not correct and should never be done because the p tag has been abused</div>
      <Image src='/vercel.svg' alt='' width='30' height='30'/>
    </p>
  )
}

/**
 * This will work
 */
export const CorrectComponent = ()=>{
  return(
    <div>
      <div>This is correct and should work because a div is really good for this task.</div>
      <Image src='/vercel.svg' alt='' width='30' height='30'/>
    </div>
  )
}

Original Author Motsi Of This Content

Solution 2

I had similar issues. Reverting back to a stable version of react worked the magic

Consider reverting back to React 17

Here is a github discussion (https://github.com/vercel/next.js/discussions/35773)

Original Author Daniel Olabemiwo Of This Content

Solution 3

This solution work for me:

export default function MyApp({ Component, pageProps }: AppProps) {
  const [showChild, setShowChild] = useState(false);
  useEffect(() => {
    setShowChild(true);
  }, []);

  if (!showChild) {
    return null;
  }

  if (typeof window === 'undefined') {
    return <></>;
  } else {
    return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    );
  }
}

I also using NextJS, Redux Toolkit

Original Author Minh-Thanh Hoang Of This Content

Solution 4

it will work:

 function MyApp({ Component, pageProps }) {
      const [showing, setShowing] = useState(false);

      useEffect(() => {
        setShowing(true);
      }, []);
    
      if (!showing) {
        return null;
      }
    
      if (typeof window === 'undefined') {
        return <></>;
      } else {
        return (
           <RecoilRoot>
             <MainLayout>
                 <Component {...pageProps} />
              </MainLayout>
           </RecoilRoot>
        );
      }
    }

 export default MyApp;

here I used recoil for state managing.

Original Author Saeid Shoja Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

Siddharth

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment