Callback через контекст

В этом решении мы выносим колбэк «отметить прочитанным» в контекст: создаём MailContext, передаём в провайдер объект с onMarkRead, а MarkReadButton читает его через useContext. LetterView больше не принимает и не передаёт колбэк пропсом — кнопка получает его напрямую из контекста.

Создание контекста

const MailContext = React.createContext(null);

В контексте хранится только колбэк onMarkRead — функция, которая добавляет id письма в список прочитанных. Компоненты в глубине дерева смогут вызывать её по клику без проброса через промежуточные уровни.

MarkReadButton читает onMarkRead из контекста

function MarkReadButton({ id }) {
    const { onMarkRead } = React.useContext(MailContext);

Вместо пропа onMarkRead компонент получает функцию из контекста. По клику вызывается onMarkRead(id) — id текущего письма. Родителю не нужно передавать колбэк в кнопку.

LetterView без пропа onMarkRead

function LetterView({ letter, isRead }) {
    return (
        <div 

LetterView принимает только letter и isRead — данные для отображения. Колбэк onMarkRead не передаётся: в не прочитанное письмо рендерится <MarkReadButton id={letter.id} />, а кнопка сама достаёт onMarkRead из контекста.

useCallback, useMemo и провайдер в App

function App() {
    const [readIds, setReadIds] = React.useState

Колбэк onMarkRead обёрнут в React.useCallback с пустым массивом зависимостей — ссылка на функцию не меняется между рендерами. Объект value для провайдера создаётся через React.useMemo с зависимостью [onMarkRead]: при стабильном колбэке и ссылка на value стабильна, потребители контекста не перерисовываются лишний раз. В провайдер передаётся только этот value; LetterView вызывается без пропа onMarkRead.