Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.
ВойтиСоздать аккаунт — бесплатноЗакончили урок?
Войдите, чтобы отмечать прогресс
В этом решении мы выносим колбэк «отметить прочитанным» в контекст: создаём MailContext, передаём в провайдер объект с onMarkRead, а MarkReadButton читает его через useContext. LetterView больше не принимает и не передаёт колбэк пропсом — кнопка получает его напрямую из контекста.
В контексте хранится только колбэк onMarkRead — функция, которая добавляет id письма в список прочитанных. Компоненты в глубине дерева смогут вызывать её по клику без проброса через промежуточные уровни.
Вместо пропа onMarkRead компонент получает функцию из контекста. По клику вызывается onMarkRead(id) — id текущего письма. Родителю не нужно передавать колбэк в кнопку.
LetterView принимает только letter и isRead — данные для отображения. Колбэк onMarkRead не передаётся: в не прочитанное письмо рендерится <MarkReadButton id={letter.id} />, а кнопка сама достаёт onMarkRead из контекста.
Колбэк onMarkRead обёрнут в React.useCallback с пустым массивом зависимостей — ссылка на функцию не меняется между рендерами. Объект value для провайдера создаётся через React.useMemo с зависимостью [onMarkRead]: при стабильном колбэке и ссылка на value стабильна, потребители контекста не перерисовываются лишний раз. В провайдер передаётся только этот value; LetterView вызывается без пропа onMarkRead.