4.6.12

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@vercel/analytics": "^1.1.1",
-    "emoji-picker-react": "^4.6.11",
+    "emoji-picker-react": "^4.6.12",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18"

src/components/RandomEmoji.tsx

@@ -1,5 +1,15 @@
+import { useState, useRef, useEffect } from "react";
+
 export default function RandomEmoji() {
-  return <div>{getRandomEmoji()}</div>;
+  const [currentEmoji, setCurrentEmoji] = useState(getRandomEmoji());
+
+  useEffect(() => {
+    setTimeout(() => {
+      setCurrentEmoji(getRandomEmoji());
+    }, 150) as unknown as number;
+  }, [currentEmoji]);
+
+  return <div suppressHydrationWarning>{currentEmoji}</div>;
 }
 
 function getRandomEmoji() {

src/pages/index.tsx

@@ -6,13 +6,8 @@ import dynamic from "next/dynamic";
 import Link from "next/link";
 import { Analytics } from "@vercel/analytics/react";
 import pkg from "../../package.json";
-
-const PickerDemo = dynamic(() => import("../components/PickerDemo"), {
-  ssr: false,
-});
-const RandomEmoji = dynamic(() => import("../components/RandomEmoji"), {
-  ssr: false,
-});
+import PickerDemo from "../components/PickerDemo";
+import RandomEmoji from "../components/RandomEmoji";
 
 const inter = Inter({ subsets: ["latin"] });