#Lazy loading

The toast UI, animations, drag logic, and stylesheet live in a code-split chunk that downloads only when the first enqueueSnackbar fires. Apps that mount the provider but never enqueue pay only for the bootstrap (~2.5 KB gzipped).

#How it works

<SnackbarProvider> uses React.lazy and <Suspense> to defer the renderer:

const LazyNotifierRoot = lazy(() => import('./renderer'));

function SnackbarProvider({ children, ...props }) {
  const [active, setActive] = useState(false);

  const enqueueSnackbar = (message, options) => {
    // ...append to queue...
    if (!active) setActive(true); // first call mounts the renderer
  };

  return (
    <Context.Provider value={api}>
      {children}
      {active ? (
        <Suspense fallback={null}>
          <LazyNotifierRoot {...} />
        </Suspense>
      ) : null}
    </Context.Provider>
  );
}

The import('./renderer') literal survives rslib's bundleless build, so consumer bundlers (rsbuild, Vite, webpack) treat it as a code-split point. The CSS imported by the renderer follows it into the same chunk.

#Prefetch

To avoid the first-toast download latency, the provider warm-loads the chunk during browser idle time by default:

<SnackbarProvider prefetch='idle'>{children}</SnackbarProvider>

The idle prefetch hides the chunk download behind whatever else the page is doing, so the first toast doesn't have to wait on a network round-trip.

#SSR

The lazy renderer is gated on active, which only flips after a client-side enqueueSnackbar. On the server the output is just {children} plus an empty provider, so there are no portals, no document access, and no hydration mismatch.

#Bundle sizes

Approximate gzipped sizes for the most recent build: