Next.js Discord

Discord Forum

Hydration error with CSR

Unanswered
Forest bachac posted this in #help-forum
Open in Discord
Forest bachacOP
"use client";

import { useEffect, useState } from "react";

export default function Clock() {
  const [time, setTime] = useState<Date>(new Date());

  useEffect(() => {
    const clock = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(clock);
  }, []);

  return (
    <h3 className="text-white text-5xl font-bold">
      {time.toLocaleTimeString("en-US", {})}
    </h3>
  );
}


Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Text content did not match. Server: "9:37:12 PM" Client: "9:37:13 PM"

However, I am client side rendering?

2 Replies

Forest bachacOP
.
Sun bear
I think it will work like this:

"use client";

import { useEffect, useState } from "react";

export default function Clock() {
  const [time, setTime] = useState<Date | null>(null);

useEffect(() => {
setTime(new Date());
},[])

  useEffect(() => {
    const clock = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(clock);
  }, []);

  return (
    <h3 className="text-white text-5xl font-bold">
      {time && time.toLocaleTimeString("en-US", {})}
    </h3>
  );
}