How to fix React Hydration errors caused by using client-side rendering in React and Next.js?
Combined with the useEffect hook in React. My goal is to incorporate client-side rendering while ensuring that react hydration errors are prevented from occurring.
As I understand it, client-side rendering requires components to be rendered on the client browser instead of the server, thus improving performance and interactivity. However, during the transition to client-side rendering, issues can arise due to inconsistencies between the initial server-side rendered HTML and subsequent client-side rendered components, resulting in React-Hydration-Errors.
With this situation in mind, I would really appreciate your guidance on effectively utilizing useEffect hooks to achieve correct client-side rendering without encountering any react-hydration errors. I'm looking for a professional approach to this challenge and would really appreciate any best practices, strategies, or code examples you can share.
Thank you in advance for your valuable help.
This is my sample code:
https://nextjs.org/docs/messages/react-Hydration-error
"use client"
import Image from 'next/image';
import Link from 'next/link';
import React, { useState, useEffect } from 'react';
import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';
import { motion, useScroll } from 'framer-motion';
import logo from '../public/logo_navbar_adobe_express.svg';
import { variants } from '../utils/motion';
import { BsArrowRightCircle } from 'react-icons/bs'
import styles from '../styles';
function useWindowSize(nav, setNav) {
const [windowSize, setWindowSize] = useState([0, 0]);
useEffect(() => {
function updateWindowSize() {
setWindowSize([window.innerWidth, window.innerHeight]);
if (window.innerWidth >= 768 && nav) {
setNav(false);
}
}
window.addEventListener('resize', updateWindowSize);
updateWindowSize();
return () => window.removeEventListener('resize', updateWindowSize);
}, [nav, setNav]);
return windowSize;
}
const Navbar = () => {
const [nav, setNav] = useState(false);
const windowSize = useWindowSize(nav, setNav);
const isMobile = windowSize[0] < 768;
const handleNav = () => {
setNav(!nav);
};
/** this hook gets the scroll y-axis **/
const { scrollY } = useScroll();
/** this hook manages state **/
const [hidden, setHidden] = React.useState(false);
/** this onUpdate function will be called in the `scrollY.onChange` callback **/
function update() {
if (scrollY?.current < scrollY?.prev) {
setHidden(false);
} else if (scrollY?.current > 100 && scrollY?.current > scrollY?.prev) {
setHidden(true);
}
}
/** update the onChange callback to call for `update()` **/
useEffect(() => {
return scrollY.onChange(() => update());
}, [scrollY]); // Add scrollY as a dependency
return (
<motion.nav
variants={variants}
initial="hidden"
animate={hidden ? 'hidden' : 'visible'}
/** I'm also going to add a custom easing curve and duration for the animation **/
transition={{ ease: [0.1, 0.25, 0.3, 1], duration: 0.6 }}
className={`navbar-bg dark:bg-gray-900 fixed w-full z-20 top-0 left-0`}
>
<div className="absolute w-[20%] inset-0 gradient-01" />
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<Link href="/">
<Image
src={logo}
alt="/"
className="cursor-pointer"
width="175"
height="175"
/>
</Link>
useWindowSize function seems to trigger react hydration error
