Toasts

The problem I keep seeing

After a save, delete, or error, the user needs feedback. Inline messages clutter the form; modals are heavy. You want a small, non-blocking notification (toast) that appears briefly and can be triggered from anywhere -mutations, API errors, background jobs -without passing callbacks through the tree.

Naive approach

Local state in the component that performs the action: toast message + a timeout to clear it. The toast is rendered in the same component; other parts of the app can’t trigger toasts without prop drilling or duplicating UI.

First improvement

A toast context (or small store): expose a function like toast(message) and render a list of toasts in a single fixed container (e.g. bottom-right). Any component can call the function; toasts stack and auto-dismiss after a delay.

Remaining issues

• Accessibility: Toasts should be announced to screen readers (aria-live region) and not steal focus from the flow.
• Variants: Success (green), error (red), loading, promise (loading → success/error). A small API keeps call sites clean.
• Stacking and dismiss: Multiple toasts should stack; user may want to dismiss one or pause auto-remove.

Production pattern

Use a library: sonner, react-hot-toast, or Radix UI Toast. They provide a global toast.success() / toast.error() (and often toast.promise() for async), a single Toaster in the layout, stacking, dismiss, and aria-live. Add the provider once; call from any component or from non-React code (e.g. API client) if the library supports an imperative API.

When I use this

• Mutation feedback: “Saved”, “Deleted”, “Failed to save” after a button or form submit.
• Background jobs: “Export ready”, “Sync complete” when you can’t show inline.
• Skip when: The message is critical and must be acknowledged (use a modal or inline error). For validation errors, prefer inline near the field.

Gotchas

• Don’t toast validation errors: Show those next to the fields or at the top of the form so the user can fix them; toasts are for success or non-field errors.
• aria-live: Use aria-live="polite" so screen readers announce the toast without interrupting; avoid assertive unless it’s urgent.
• Promise toasts: toast.promise(fn, { loading, success, error }) keeps the UX to one toast that updates; better than loading toast + separate success toast.