Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.
ВойтиСоздать аккаунт — бесплатноЗакончили урок?
Войдите, чтобы отмечать прогресс
В этом решении уведомления вынесены в контекст: создаются NotificationsContext, хук useNotifications() и провайдер с state тостов и контейнером для них. Кнопка получает addToast из хука и не знает, где рендерятся тосты.
Контекст не экспортируется — снаружи доступны только провайдер и хук. useNotifications() возвращает значение контекста и бросает ошибку, если вызван вне провайдера, чтобы сразу заметить неправильное использование.
В провайдере живут state тостов и addToast; значение контекста стабилизировано через useMemo. Провайдер рендерит сначала children, затем контейнер с тостами — тосты отображаются в одном месте, а вызывать addToast можно из любого дочернего компонента.
App не хранит тосты и не рендерит контейнер — только оборачивает дерево в NotificationsProvider и выводит ShowToastButton. Вся логика уведомлений скрыта в провайдере.
Кнопка не принимает пропсов: по клику вызывает addToast, полученный из useNotifications(). То же можно сделать в любом другом компоненте внутри провайдера — уведомления появятся в общем контейнере.