Уведомления через контекст

В этом решении уведомления вынесены в контекст: создаются NotificationsContext, хук useNotifications() и провайдер с state тостов и контейнером для них. Кнопка получает addToast из хука и не знает, где рендерятся тосты.

Контекст и хук useNotifications

const NotificationsContext = React.createContext(null);

function useNotifications() {
    const value = React.useContext(NotificationsContext);

    if (!value) throw new Error('useNotifications только внутри NotificationsProvider');

    return value;
}

Контекст не экспортируется — снаружи доступны только провайдер и хук. useNotifications() возвращает значение контекста и бросает ошибку, если вызван вне провайдера, чтобы сразу заметить неправильное использование.

NotificationsProvider: state, addToast и контейнер тостов

function NotificationsProvider({ children }) {
    const [toasts, setToasts] = 

В провайдере живут state тостов и addToast; значение контекста стабилизировано через useMemo. Провайдер рендерит сначала children, затем контейнер с тостами — тосты отображаются в одном месте, а вызывать addToast можно из любого дочернего компонента.

App только оборачивает в провайдер

function App() {
    return (
        <NotificationsProvider>
            <div className=

App не хранит тосты и не рендерит контейнер — только оборачивает дерево в NotificationsProvider и выводит ShowToastButton. Вся логика уведомлений скрыта в провайдере.

ShowToastButton получает addToast из хука

function ShowToastButton() {
    const { addToast } = useNotifications();

    return (
        <

Кнопка не принимает пропсов: по клику вызывает addToast, полученный из useNotifications(). То же можно сделать в любом другом компоненте внутри провайдера — уведомления появятся в общем контейнере.