{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Ключевая идея"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React "},{"type":"text","marks":[{"type":"bold"}],"text":"Context ≠ глобальный стор"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"он задуман как "},{"type":"text","marks":[{"type":"bold"}],"text":"механизм передачи данных вниз по дереву без prop drilling"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а не как полноценная система управления состоянием."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Почему Context не всегда подходит для глобального state"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1. 🔁 "},{"type":"text","marks":[{"type":"bold"}],"text":"Каждое изменение value вызывает ререндер всех потребителей"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда ты пишешь:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React сравнивает "},{"type":"text","marks":[{"type":"code"}],"text":"value"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"по ссылке"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Если она изменилась → все компоненты, использующие "},{"type":"text","marks":[{"type":"code"}],"text":"useContext(MyContext)"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"перерисовываются"},{"type":"text","text":", даже если нужное им поле не изменилось."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📉 При большом дереве это даёт каскадные обновления и лаги."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Пример:"},{"type":"hardBreak"},{"type":"text","text":"Изменилась "},{"type":"text","marks":[{"type":"code"}],"text":"user.name"},{"type":"text","text":" → весь UI, использующий "},{"type":"text","marks":[{"type":"code"}],"text":"theme"},{"type":"text","text":", тоже ререндерится."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2. 🧱 "},{"type":"text","marks":[{"type":"bold"}],"text":"Нет “селекторов” (гранулярных подписок)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Контекст не умеет подписывать компонент "},{"type":"text","marks":[{"type":"bold"}],"text":"только на часть данных"},{"type":"text","text":"."}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если в "},{"type":"text","marks":[{"type":"code"}],"text":"value"},{"type":"text","text":" лежит "},{"type":"text","marks":[{"type":"code"}],"text":"{ user, theme, cart }"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"то при изменении "},{"type":"text","marks":[{"type":"code"}],"text":"cart"},{"type":"text","text":" обновятся даже те, кому нужен только "},{"type":"text","marks":[{"type":"code"}],"text":"theme"},{"type":"text","text":"."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Решение — использовать сторонние инструменты ("},{"type":"text","marks":[{"type":"code"}],"text":"use-context-selector"},{"type":"text","text":", Zustand, Jotai),"},{"type":"hardBreak"},{"type":"text","text":"но “чистый” Context этого не даёт."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3. 🔄 "},{"type":"text","marks":[{"type":"bold"}],"text":"Каждое обновление проходит через React-рендер"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Контекст не оптимизирован под "},{"type":"text","marks":[{"type":"bold"}],"text":"часто меняющийся стейт"},{"type":"text","text":" (например, курсор, таймер, ввод текста)."},{"type":"hardBreak"},{"type":"text","text":"При 60 обновлениях в секунду React просто не успевает."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Context = UI-состояние"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а не “реактивный поток”."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"4. 🧠 "},{"type":"text","marks":[{"type":"bold"}],"text":"Нет инструментов, middleware и devtools"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Context:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не имеет devtools;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не поддерживает time-travel;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не позволяет удобно логировать изменения, откатывать state, дебажить бизнес-логику;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не масштабируется при сложной архитектуре."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"5. 🧩 "},{"type":"text","marks":[{"type":"bold"}],"text":"Трудно масштабировать при росте приложения"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда приложение растёт,"},{"type":"hardBreak"},{"type":"text","text":"начинаются “костыли”: десятки контекстов ("},{"type":"text","marks":[{"type":"code"}],"text":"AuthContext"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"CartContext"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"UIContext"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"SettingsContext"},{"type":"text","text":"…), вложенные "},{"type":"text","marks":[{"type":"code"}],"text":"Provider"},{"type":"text","text":"-деревья, запутанные зависимости и “Provider hell”:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n \n \n \n \n \n \n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📉 Трудно поддерживать, тестировать и расширять."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"6. 🚫 "},{"type":"text","marks":[{"type":"bold"}],"text":"Контекст — синхронен и локален"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Он не предназначен для:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"асинхронных запросов (fetch/cache/retry);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"синхронизации с сервером;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"оффлайн-данных;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"реактивных подписок (WebSocket, SSE и т.д.)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для этого лучше использовать "},{"type":"text","marks":[{"type":"bold"}],"text":"React Query"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Zustand"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Redux Toolkit"},{"type":"text","text":" и др."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Когда Context всё же идеален"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Применение"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Почему подходит"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🌗 Тема (light/dark)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Простое, редкое изменение"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🌍 Язык интерфейса (i18n)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обновляется только при переключении языка"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👤 Текущий пользователь"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Меняется только при логине/логауте"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧩 Feature flags, настройки"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Малый объём данных, низкая частота изменений"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚙️ Compound components"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Контекст используется как внутренняя шина связи (Tabs, Modal, Dropdown и т.д.)"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🚀 Альтернатива для “реального” глобального state"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Задача"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Инструмент"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Часто меняющееся состояние, бизнес-логика"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Zustand"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Jotai"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Redux Toolkit"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Асинхронные данные (fetch, кэш)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"TanStack Query (React Query)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Реактивные подписки, сервер-пуши"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"RxJS"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"useSyncExternalStore"},{"type":"text","text":", собственный стор"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Простые статические данные"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Context"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📘 Итого"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Причина"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Почему Context не подходит"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔁 Частые обновления"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Все потребители ререндерятся"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🎯 Нет селекторов"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Нельзя подписаться только на часть данных"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 Нет инструментов"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Нельзя дебажить или контролировать поток"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧩 Плохая масштабируемость"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Provider hell и сложные зависимости"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⏳ Нет асинхронности"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Всё синхронно и локально"}]}]}]}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"💬 Вывод:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Context — это механизм “передачи данных вниз по дереву”,"},{"type":"hardBreak"},{"type":"text","text":"а не “глобальное хранилище состояния”."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для небольших глобальных флагов — отлично."},{"type":"hardBreak"},{"type":"text","text":"Для сложного бизнес-стейта — лучше Zustand, Jotai, Redux Toolkit или React Query."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Почему Context не всегда подходит для глобального состояния?

Комментарии