{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"1) Базовый и безопасный паттерн (с "},{"type":"text","marks":[{"type":"code"}],"text":"undefined"},{"type":"text","text":" + кастомный хук)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда контекст обязателен внутри поддерева и "},{"type":"text","marks":[{"type":"bold"}],"text":"не должен"},{"type":"text","text":" быть "},{"type":"text","marks":[{"type":"code"}],"text":"null"},{"type":"text","text":"/"},{"type":"text","marks":[{"type":"code"}],"text":"undefined"},{"type":"text","text":" во время использования."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import React, { createContext, useContext, ReactNode } from \"react\";\n\ntype Theme = \"light\" | \"dark\";\n\ntype ThemeCtx = {\n theme: Theme;\n setTheme: (t: Theme) => void;\n};\n\n// 1) Контекст допускает undefined до Provider\nconst ThemeContext = createContext(undefined);\n\n// 2) Безопасный хук: кидает понятную ошибку, если провайдера нет\nexport function useTheme() {\n const ctx = useContext(ThemeContext);\n if (!ctx) throw new Error(\"useTheme must be used within \");\n return ctx;\n}\n\n// 3) Провайдер с типами пропсов\nexport function ThemeProvider({\n value,\n children,\n}: {\n value: ThemeCtx;\n children: ReactNode;\n}) {\n return {children};\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Почему так лучше:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не нужно писать "},{"type":"text","marks":[{"type":"code"}],"text":"!"},{"type":"text","text":"/кастовать "},{"type":"text","marks":[{"type":"code"}],"text":"as ThemeCtx"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"получаем раннюю и понятную ошибку, если забыли обернуть в провайдер."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"2) Контекст с валидным дефолтом (если он реально есть)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если вне провайдера значение "},{"type":"text","marks":[{"type":"bold"}],"text":"осмысленно"},{"type":"text","text":" (например, read-only настройки)."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"type Config = { apiBase: string; locale: string };\n\nconst defaultConfig: Config = { apiBase: \"/api\", locale: \"ru\" };\nconst ConfigContext = createContext(defaultConfig);\n\nexport const useConfig = () => useContext(ConfigContext);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Важно:"},{"type":"text","text":" давайте дефолт "},{"type":"text","marks":[{"type":"bold"}],"text":"только тогда"},{"type":"text","text":", когда он действительно корректен для runtime — иначе вы скроете баг."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"3) Контекст, который может быть "},{"type":"text","marks":[{"type":"code"}],"text":"null"},{"type":"text","text":" по домену"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если «нет значения» — это "},{"type":"text","marks":[{"type":"bold"}],"text":"нормальный"},{"type":"text","text":" кейс."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"type User = { id: string; name: string } | null;\n\nconst CurrentUserContext = createContext(null);\n\nexport const useCurrentUser = () => useContext(CurrentUserContext);\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"4) Пара «state + dispatch» (удобно для редьюсеров)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"type Action =\n | { type: \"set\"; payload: number }\n | { type: \"reset\" };\n\ntype CounterState = { count: number };\n\ntype CounterCtx = {\n state: CounterState;\n dispatch: React.Dispatch;\n};\n\nconst CounterContext = createContext(undefined);\n\nexport function useCounter() {\n const ctx = useContext(CounterContext);\n if (!ctx) throw new Error(\"useCounter must be used within \");\n return ctx;\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"5) Кортеж/мульти-значение (иногда удобнее)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"type Filters = { q: string; tags: string[] };\ntype SetFilters = (next: Filters) => void;\n\nconst FiltersContext = createContext<[Filters, SetFilters] | undefined>(undefined);\n\nexport function useFilters() {\n const ctx = useContext(FiltersContext);\n if (!ctx) throw new Error(\"useFilters must be used within \");\n return ctx; // вернёт [filters, setFilters]\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"6) Типизация провайдера (пропсы "},{"type":"text","marks":[{"type":"code"}],"text":"value"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"children"},{"type":"text","text":")"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"type AuthCtx = { token: string | null; login: (t: string) => void };\nconst AuthContext = createContext(undefined);\n\ntype AuthProviderProps = {\n value: AuthCtx; // строго типизируем value\n children: ReactNode;\n};\n\nexport function AuthProvider({ value, children }: AuthProviderProps) {\n return {children};\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"7) Избегайте анти-паттернов"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ "},{"type":"text","marks":[{"type":"code"}],"text":"createContext(null as unknown as Ctx)"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"null!"},{"type":"text","text":" — скрывает ошибки."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Давать «фиктивный» дефолт, если без провайдера работать "},{"type":"text","marks":[{"type":"bold"}],"text":"нельзя"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Хранить в контексте часто меняющиеся примитивы без нужды (вызовет лишние рендеры)."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"8) Нюансы и советы"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для больших значений мемоизируйте "},{"type":"text","marks":[{"type":"code"}],"text":"value"},{"type":"text","text":" в провайдере:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const value = useMemo(() => ({ theme, setTheme }), [theme]);\n"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для SSR/тестов удобно иметь "},{"type":"text","marks":[{"type":"bold"}],"text":"валидный дефолт"},{"type":"text","text":" (паттерн №2) — если это действительно безопасно."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если контекст используется в разных пакетах, экспортируйте "},{"type":"text","marks":[{"type":"bold"}],"text":"и контекст, и хук"},{"type":"text","text":", но потребителям отдавайте именно хук — так вы навяжете безопасное использование."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"Короткая шпаргалка"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Обязательный провайдер"},{"type":"text","text":" → "},{"type":"text","marks":[{"type":"code"}],"text":"createContext(undefined)"},{"type":"text","text":" + "},{"type":"text","marks":[{"type":"code"}],"text":"useXxx()"},{"type":"text","text":" с ошибкой."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Есть осмысленный дефолт"},{"type":"text","text":" → "},{"type":"text","marks":[{"type":"code"}],"text":"createContext(defaultValue)"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Допускается отсутствие"},{"type":"text","text":" → "},{"type":"text","marks":[{"type":"code"}],"text":"createContext(null)"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Reducer-стиль"},{"type":"text","text":" → "},{"type":"text","marks":[{"type":"code"}],"text":"createContext<{ state: S; dispatch: Dispatch } | undefined>(undefined)"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как типизировать контекст?

Комментарии