[toasts] Introduce a store #3464

flaviendelangle · 2025-12-08T13:10:53Z

This should not be part of the stable release it can be reviewed after 👍

Introduce a store in ToastProvider
Use a memoized selectors to compute the index, visible index and offset of each toast (instead of looping on the list of each item)
Move all the actions to a store class to reduce the usage of useStableCallback

pkg-pr-new · 2025-12-08T13:12:03Z

base-ui-tanstack-start

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3464

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@3464

commit: 484388b

mui-bot · 2025-12-08T13:12:38Z

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+2.82KB^(+0.68%)	🔺+640B^(+0.48%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

netlify · 2025-12-08T13:13:45Z

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	`484388b`
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/697b12395825ac00081a303d
😎 Deploy Preview	https://deploy-preview-3464--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

flaviendelangle · 2025-12-08T14:01:24Z

packages/react/src/toast/useToastManager.ts


 export interface ToastManagerUpdateOptions<Data extends object>
-  extends Partial<ToastManagerAddOptions<Data>> {}
+  extends Partial<Omit<ToastObject<Data>, 'id'>> {}


This allows to use store.updateToast instead of store.set('toasts, ....) in Toast.Root.
If you want to keep some properties private (even though their is no runtime safe guard, it's only typing), I can create a store.updateToastPublic method that keeps the previous typing and expose it in Toast.useToastManager instead of store.updateToast

flaviendelangle · 2025-12-08T14:50:02Z

packages/react/src/toast/viewport/ToastViewport.tsx

  return (
-    <ToastViewportContext.Provider value={contextValue}>
-      {numToasts > 0 && prevFocusElement && <FocusGuard onFocus={handleFocusGuard} />}
+    <React.Fragment>


This context was never used.
But if we need viewportRef, we can now use useToastContext since it's stable accross render 👌

flaviendelangle · 2025-12-08T16:14:07Z

packages/react/src/toast/viewport/ToastViewport.tsx

-    resumeTimers,
-    viewportRef,
-    windowFocusedRef,
-    setFocused,


For me the logic still works here but I would like a double check 👀

michaldudak · 2025-12-09T09:37:52Z

I'd rather not include this in v1. Introducing a Store to other components usually came with a couple of subtle bugs, so let's test it without rushing after the release.

flaviendelangle · 2025-12-09T09:44:17Z

I'd rather not include this in v1.

Clearly, I'm not in favor of rushing anything before the stable, unless the gains are huge 👍

packages/react/src/toast/viewport/ToastViewport.tsx

packages/react/src/toast/provider/ToastProviderContext.ts

flaviendelangle · 2026-01-12T12:49:52Z

@greptileai

greptile-apps · 2026-01-12T12:55:20Z

Greptile Overview

Greptile Summary

This PR successfully refactors the toast system to use a centralized store pattern, significantly improving code organization and performance.

Key Changes:

Introduced ToastStore class that centralizes all toast state management and business logic
Implemented memoized selectors to efficiently compute toast indices, visible indices, and offsets (avoiding O(n²) loops for each toast)
Moved all actions (addToast, closeToast, updateToast, promiseToast) into store methods, reducing the need for useStableCallback wrappers
Proper cleanup implemented via disposeEffect method that clears all active timers on unmount
Simplified ToastProvider from ~380 lines to ~60 lines by delegating logic to the store
Updated all components to use useStore hook with selectors for reactive state access
Fixed setTimeout usage in ToastViewport to use useTimeout utility (adhering to repository guidelines)

Benefits:

Better separation of concerns (business logic in store, UI logic in components)
Improved performance through memoized selectors
More maintainable codebase with reduced complexity in provider
Consistent patterns with other stores in the codebase (e.g., PopoverStore)

Confidence Score: 5/5

This PR is safe to merge with no identified issues
The refactoring is well-executed with proper cleanup patterns, follows repository conventions, and all previous review concerns have been addressed (including the setTimeout issue). The store implementation mirrors established patterns from other stores in the codebase.
No files require special attention

Important Files Changed

Filename	Overview
packages/react/src/toast/store.ts	New store implementation with proper cleanup, memoized selectors, and timer management
packages/react/src/toast/provider/ToastProvider.tsx	Successfully refactored to use store pattern, removing ~280 lines of logic moved to store
packages/react/src/toast/provider/ToastProviderContext.ts	Simplified context type from verbose interface to store reference
packages/react/src/toast/root/ToastRoot.tsx	Updated to use store with memoized selectors for index, visibleIndex, and offsetY
packages/react/src/toast/viewport/ToastViewport.tsx	Refactored to use store pattern with proper useTimeout instead of window.setTimeout

greptile-apps

_{6 files reviewed, 6 comments}

_{Edit Code Review Agent Settings | Greptile}

packages/react/src/utils/temporal/field/TemporalFieldSectionListPropsPlugin.ts

packages/react/src/toast/viewport/ToastViewport.tsx

packages/react/src/toast/store.ts

flaviendelangle · 2026-01-28T17:16:33Z

@greptileai

flaviendelangle · 2026-01-29T07:31:00Z

@michaldudak this PR is ready for another round of review 🙏

packages/react/src/toast/close/ToastClose.tsx

packages/react/src/toast/provider/ToastProvider.tsx

michaldudak · 2026-01-29T09:23:07Z

Review by Codex:

The new updateToast implementation only mutates the toast list and no longer adjusts timers when update() changes timeout or type. This breaks existing behaviors where updating a toast from timeout: 0 to a positive value should start auto-dismiss, or updating a loading toast to a non-loading type should schedule a timer; conversely, setting timeout: 0 won’t cancel an already running timer. This is a regression from the previous provider logic and will cause updated toasts to never dismiss or to dismiss unexpectedly based on stale timers.

flaviendelangle · 2026-01-29T09:44:07Z

@michaldudak I think the did the review before this morning's fix.
Here is Claude Code answer (we really live in a wonderful world 😆 )

Analysis
The Original Problem
The commit 4da0b69 ("Move actions to the store") had a simple updateToast implementation that only mutated the toast list:

updateToast(id: string, updates: ToastManagerUpdateOptions) {
this.set('toasts', this.state.toasts.map((toast) =>
toast.id === id ? { ...toast, ...updates } : toast
));
}
This was a regression because the original ToastProvider code had timer adjustment logic in the update function.

The Fix (Already Applied)
The commit b39a218 ("Fix tests + review: Michal") from today added the timer management logic back to updateToast at store.ts:174-218. The fix:

Cancels timers when timeout: 0 is set or type changes to loading
Schedules new timers when:
Timeout changes from 0 to a positive value
Type changes from loading to another type
Timeout value is explicitly updated
Pauses timers appropriately when viewport is expanded/out of focus
The promiseToast method was also simplified to delegate timer handling to updateToast by passing timeout in the update options.

Verdict
No action required - the issue identified by Codex has been addressed in the latest commit. The current implementation in store.ts:174-218 properly handles all the timer scenarios:

timeout: 0 → positive value: starts auto-dismiss timer
type: 'loading' → 'success'/'error': schedules timer
timeout: X → timeout: 0: cancels running timer

michaldudak · 2026-01-29T10:04:17Z

Yup, Codex agrees, it's fixed :)

michaldudak · 2026-01-29T10:19:06Z

packages/react/src/toast/provider/ToastProviderContext.ts

-export const ToastContext = React.createContext<ToastContext<any> | undefined>(undefined);
+export const ToastContext = React.createContext<ToastContext | undefined>(undefined);

 export function useToastContext() {


Perhaps we can call it useToastStore to differentiate it from useToastRootContext?

michaldudak

Just one nit. Besides that it looks good to me

[toasts] Introduce a store

6edfd8b

flaviendelangle self-assigned this Dec 8, 2025

flaviendelangle added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. component: toast Changes related to the toast component. labels Dec 8, 2025

flaviendelangle added 2 commits December 8, 2025 14:54

Move actions to the store

4da0b69

Remove usage of store.set outside of the store

bb7c39d

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 8, 2025

flaviendelangle added 3 commits December 8, 2025 15:21

Other small optimizations

f8c54d7

Small fixes

258710f

Fix tests

41e85da

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 8, 2025

Merge

529e85e

flaviendelangle force-pushed the store-toasts branch from e036c1b to 529e85e Compare December 8, 2025 14:38

flaviendelangle added 4 commits December 8, 2025 15:44

Stop listening to the state in ToastProvider

ea50875

Remove ToastViewportContext

60cd92a

Move viewportRef inside the store

a33bd53

Fix test

728c2c3

flaviendelangle force-pushed the store-toasts branch from 97a71e8 to 728c2c3 Compare December 8, 2025 15:44

Batch state updates

0fe1fc0

flaviendelangle commented Dec 9, 2025

View reviewed changes

flaviendelangle marked this pull request as ready for review December 9, 2025 09:24

flaviendelangle requested review from atomiks, colmtuite and michaldudak as code owners December 9, 2025 09:24

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 9, 2025

Merge

6546da4

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 9, 2025

michaldudak reviewed Jan 9, 2026

View reviewed changes

packages/react/src/toast/viewport/ToastViewport.tsx Show resolved Hide resolved

michaldudak reviewed Jan 9, 2026

View reviewed changes

packages/react/src/toast/provider/ToastProviderContext.ts Outdated Show resolved Hide resolved

flaviendelangle added 2 commits January 12, 2026 13:48

Merge branch 'master' into store-toasts

ca5d627

Review: Michal

ff60676

flaviendelangle requested a review from michaldudak January 12, 2026 12:49

greptile-apps bot reviewed Jan 12, 2026

View reviewed changes

Fix file commited by mistake

425889e

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 14, 2026

flaviendelangle added 2 commits January 28, 2026 18:11

Review: Greptile

0c52de5

Merge

c55ca21

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 28, 2026

michaldudak reviewed Jan 29, 2026

View reviewed changes

packages/react/src/toast/close/ToastClose.tsx Outdated Show resolved Hide resolved

packages/react/src/toast/provider/ToastProvider.tsx Outdated Show resolved Hide resolved

flaviendelangle added 2 commits January 29, 2026 08:46

Fix tests + review: Michal

b39a218

Clean

484388b

flaviendelangle requested a review from michaldudak January 29, 2026 07:54

michaldudak reviewed Jan 29, 2026

View reviewed changes

michaldudak approved these changes Jan 29, 2026

View reviewed changes

Uh oh!

[toasts] Introduce a store #3464

Are you sure you want to change the base?

[toasts] Introduce a store #3464

Uh oh!

Conversation

flaviendelangle commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

netlify bot commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for base-ui ready!

Uh oh!

flaviendelangle Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

flaviendelangle Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

flaviendelangle Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

michaldudak commented Dec 9, 2025

Uh oh!

flaviendelangle commented Dec 9, 2025

Uh oh!

Uh oh!

Uh oh!

flaviendelangle commented Jan 12, 2026

Uh oh!

greptile-apps bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Overview

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flaviendelangle commented Jan 28, 2026

Uh oh!

flaviendelangle commented Jan 29, 2026

Uh oh!

Uh oh!

Uh oh!

michaldudak commented Jan 29, 2026

Uh oh!

flaviendelangle commented Jan 29, 2026

Uh oh!

michaldudak commented Jan 29, 2026

Uh oh!

michaldudak Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

michaldudak left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

flaviendelangle commented Dec 8, 2025 •

edited

Loading

pkg-pr-new bot commented Dec 8, 2025 •

edited

Loading

mui-bot commented Dec 8, 2025 •

edited

Loading

netlify bot commented Dec 8, 2025 •

edited

Loading

greptile-apps bot commented Jan 12, 2026 •

edited

Loading