reactjsreact-calendar

React Calendar gives hydrating error, how can i fix it?

So i was using react-calendar for my project and it was working fine. After some time it started giving this 3 errors: Text content does not match server-rendered HTML Hydration failed because the initial UI does not match what was rendered on the server There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering

Solution

  • I found the solution, just use useEffect so that you can render anything without worrying about whether it matches with the pre-rendered tree or not.

    const [isClient, setIsClient] = useState(false);
useEffect(() => {
    setIsClient(true);
  }, []);
<div>
 {isClient ? (<Calendar />) : (<p>Loading</p>)}
</div>