Skip to content

fix(toast): prevent duplicate toasts when multiple providers are declared #5590

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
KumJungMin wants to merge 5 commits into from
Closed

fix(toast): prevent duplicate toasts when multiple providers are declared #5590

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c648da1
fix: prevent duplicate toasts when multiple providers are declared
KumJungMin Aug 9, 2025
803b906
docs: add changeset
KumJungMin Aug 9, 2025
a2705f6
docs: delete changeset file
KumJungMin Aug 13, 2025
72a4709
chore: revert remove ToastProvider
KumJungMin Aug 13, 2025
b6bf10d
docs(toast): render ToastProvider only on blog pages in example
KumJungMin Aug 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions apps/docs/content/components/toast/close.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@ import React from "react";

export default function App() {
const [toastKey, setToastKey] = React.useState([]);
const [isBlogPage, setIsBlogPage] = React.useState(false);

React.useEffect(() => {
setIsBlogPage(window.location.pathname.startsWith("/blog"));
}, []);
Comment on lines +6 to +10
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Route-based gating of ToastProvider undermines the fix; remove it and rely on the global provider

This keeps a second provider active on blog pages, so duplicate toasts will still occur there (after hydration). It also adds a client-only route check that creates an SSR/hydration timing window where the local provider flips on post-mount. The PR objective is to have a single global provider; this local provider should be removed entirely, not conditionally rendered.

Apply this diff to delete the route-coupled state/effect:

-  const [isBlogPage, setIsBlogPage] = React.useState(false);
-
-  React.useEffect(() => {
-    setIsBlogPage(window.location.pathname.startsWith("/blog"));
-  }, []);

Run this script to verify there are no example-local providers left and that only one provider exists in the docs app shell:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "All occurrences of <ToastProvider> across the repo:"
rg -n -S '<ToastProvider'

echo
echo "Occurrences under docs content (examples/snippets) — expected: 0"
rg -n -S '<ToastProvider' apps/docs/content || true

echo
echo "Occurrences under docs app shell — expected: exactly 1 (layout/providers)"
rg -n -S '<ToastProvider' apps/docs/app -A 2 || true

Length of output: 3811

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Showing 15 lines before and after the global provider condition in page.tsx:"
rg -n 'ToastProvider' -A15 -B15 apps/docs/app/docs/[[...slug]]/page.tsx

Length of output: 1711

Remove client-only route gating and render the provider unconditionally in the close example

The isBlogPage state + effect creates an SSR/hydration mismatch and prevents the example from always having a provider. Since MDX renders raw examples before the global provider anyway, the local <ToastProvider /> must remain—but without the route check.

• File: apps/docs/content/components/toast/close.raw.jsx
• Remove the useState/useEffect for isBlogPage
• Change the provider wrapper to always render

Apply this diff:

-import React from "react";
+import React from "react";
 import { Toast, ToastProvider } from "@heroui/react";

-export default function ToastCloseExample() {
-  const [isBlogPage, setIsBlogPage] = React.useState(false);
-
-  React.useEffect(() => {
-    setIsBlogPage(window.location.pathname.startsWith("/blog"));
-  }, []);
+export default function ToastCloseExample() {
   return (
     <>
       <button onClick={() => Toast.close()}>Show Toast</button>
       <Toast description="Closable toast" closeable />
-      <div className="fixed z-[100]">{isBlogPage && <ToastProvider />}</div>
+      <div className="fixed z-[100]"><ToastProvider /></div>
     </>
   );
 }
🤖 Prompt for AI Agents 
In apps/docs/content/components/toast/close.raw.jsx around lines 6 to 10, remove
the client-only route gating: delete the React.useState and React.useEffect that
compute isBlogPage (the window.location.pathname check) and update the JSX to
always render the <ToastProvider> wrapper (no conditional based on isBlogPage)
so the provider is present unconditionally in the example to avoid SSR/hydration
mismatch.


return (
<>
<div className="fixed z-[100]">
<ToastProvider />
</div>
<div className="fixed z-[100]">{isBlogPage && <ToastProvider />}</div>
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Delete the local ToastProvider; rely on the single global provider

The fixed container plus a local provider is the root cause of duplicate regions. Remove this line and let the global provider handle the toast region.

-      <div className="fixed z-[100]">{isBlogPage && <ToastProvider />}</div>
+      {/* ToastProvider is provided globally at the app root */}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="fixed z-[100]">{isBlogPage && <ToastProvider />}</div>
{/* ToastProvider is provided globally at the app root */}
🤖 Prompt for AI Agents 
In apps/docs/content/components/toast/close.raw.jsx around line 14, the
component renders a fixed container with a local <ToastProvider> which creates a
duplicate toast region; remove this line (the fixed div wrapping and the local
ToastProvider) so the component no longer mounts a local provider and instead
relies on the single global ToastProvider already mounted at the app level.

<div className="flex flex-wrap gap-2">
<Button
variant="flat"
Expand Down