Next Js Limitation

Author: GI028Created Jan 15, 2026Updated Jan 15, 2026

When using react-hot-toast with Next.js App Router (React Server Components), passing a function as children to <Toaster /> (render-prop pattern) throws a runtime error:

Functions are not valid as a child of Client Components

This happens even when the component is marked with "use client".

<Toaster toastOptions={{ duration: 3000 }}> {(t) => ( {({ icon, message }) => ( <> {icon} {message} {t.type !== "loading" && ( <button onClick={() => toast.dismiss(t.id)}>X )} </> )} )}

may ne you can suggest an alternative, insted of using children, use an other props named renderer or something else.

Source: timolins/react-hot-toast