Not working with Next.js version 13.5.2 React 18.2.0 Hydration

[andresvpineros]

While adding the component inside an client component, I get these errors related with next hydration:

Warning: Text content did not match. Server: "s" Client: "x" Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>. Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

[jmne]

You need to check if client rendering is being used:

"use client";
import { RandomReveal } from "react-random-reveal";
import { useEffect, useState } from "react";

const Test = () => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);
  return (
            <span>
              {isClient ? (
                <RandomReveal
                  isPlaying
                  duration={5}
                  characters="?????"
                  updateInterval={0.1}
                  characterSet={["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]}
                />
              ) : (
                "?????"
              )}
            </span>
  );
};

export default Test;

[vydimitrov]

Thanks correct! Thanks @jmne