From f652e4e72cf3493a42c8f8c2193055a34455bd87 Mon Sep 17 00:00:00 2001 From: dhaanisi Date: Tue, 17 Mar 2026 09:55:29 +0530 Subject: [PATCH] fix (notifications): prevent hydration mismatch in notifications trigger --- packages/notifications/components/trigger.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/notifications/components/trigger.tsx b/packages/notifications/components/trigger.tsx index b2e97fa..dd9444d 100644 --- a/packages/notifications/components/trigger.tsx +++ b/packages/notifications/components/trigger.tsx @@ -1,3 +1,4 @@ + "use client"; import { @@ -5,7 +6,7 @@ import { NotificationIconButton, } from "@knocklabs/react"; import type { RefObject } from "react"; -import { useRef, useState } from "react"; +import { useRef, useState, useEffect } from "react"; import { keys } from "../keys"; // Required CSS import, unless you're overriding the styling @@ -14,7 +15,12 @@ import "../styles.css"; export const NotificationsTrigger = () => { const [isVisible, setIsVisible] = useState(false); + const [mounted, setMounted] = useState(false); + useEffect(() => { + setMounted(true); + }, []); const notifButtonRef = useRef(null); + const { NEXT_PUBLIC_KNOCK_API_KEY } = keys(); const handleClose = (event: Event) => { if (event.target === notifButtonRef.current) { @@ -24,7 +30,7 @@ export const NotificationsTrigger = () => { setIsVisible(false); }; - if (!keys().NEXT_PUBLIC_KNOCK_API_KEY) { + if (!mounted || !NEXT_PUBLIC_KNOCK_API_KEY) { return null; } @@ -44,3 +50,4 @@ export const NotificationsTrigger = () => { ); }; +