React State Management taste — промпт для ChatGPT и Claude.ai
Сводка правил по управлению состоянием в React: когда использовать useState, Zustand, Context и TanStack Query. Помогает избежать типичных ошибок вроде лишних глобальных сторов.
Открыть на GitHubЧто делает React State Management taste
Промпт задаёт набор правил для выбора инструмента состояния в React-приложении. Начинать советует с локального useState, а поднимать состояние только когда двум соседним компонентам оно действительно нужно. Серверные данные предлагает держать как кэш через TanStack Query, не сваливая их в глобальный стор.
Что попадает в URL: фильтры, вкладки, пагинацию — хранить в search params. Для общего клиентского состояния, которое переросло одно дерево компонентов, брать Zustand. Redux для новых проектов не советует, если команда уже не привязана к его devtools и middleware.
Отдельные правила касаются асинхронного статуса (одно поле-юнион вместо нескольких булевых), форм (React Hook Form с zod-схемой), оптимистичных обновлений и откатов. Промпт настаивает на явной типизации сторов и запрете any. Это вкусовой набор рекомендаций с оценками уверенности от 0.70 до 0.95, а не строгая архитектура.
Какие задачи решает
- выбрать между useState, Zustand и Context для конкретной задачи
- перестать хранить серверные данные в глобальном сторе
- вынести фильтры и пагинацию в URL
- убрать дублирование состояния через useEffect
- типизировать сторы без any
Примеры запросов агенту
- Вставь промпт в ChatGPT и спроси, какой стор выбрать для корзины в интернет-магазине
- Дай промпт в Claude.ai и опиши компонент с фильтрами: куда положить состояние фильтров
- Попроси ассистента проверить мой код по этим правилам и указать, где состояние хранится неправильно
Как установить React State Management taste
Как использовать
Вставьте текст в начало диалога или в инструкции проекта
Вручную: положить файлы
.claude/commands/prompts.csv.mdИз того же набора73
Весь набор →Похожие
Рядом в каталоге
Все промпты по теме «Фронтенд и UI» →Вопросы о React State Management taste
Как установить React State Management taste в Claude Code?
Промпт добавляется в файл .claude/commands/prompts.csv.md. После этого команда prompts.csv станет доступна в Claude Code.
Что делает React State Management taste?
Это подборка правил по выбору инструментов состояния в React: когда использовать локальный useState, когда Context, Zustand или TanStack Query. Каждое правило идёт с оценкой уверенности.
Можно ли использовать этот промпт в ChatGPT?
Да, промпт рассчитан на ChatGPT и Claude.ai. Его можно вставить в начале диалога, чтобы ассистент придерживался этих правил при советах по React.
Исходный текст
prompts.csv · CC0-1.0
# React State Management taste - Start with local useState and lift state only when two siblings truly need it. Confidence: 0.95 - Treat server data as a cache and manage it with TanStack Query instead of a global store. Confidence: 0.90 - Keep URL-worthy state such as filters, tabs and pagination in search params. Confidence: 0.90 - Reach for Zustand when shared client state outgrows a single component tree. Confidence: 0.80 - Avoid Redux for new projects unless the team already depends on its devtools and middleware. Confidence: 0.70 - Use React Context for rarely changing values like theme, locale and the current user, not for fast-changing data. Confidence: 0.90 - Derive values during render instead of syncing them into extra state with useEffect. Confidence: 0.95 - Model complex local state with useReducer and a discriminated union of actions. Confidence: 0.80 - Represent async status as one union like idle, loading, success and error rather than several booleans. Confidence: 0.85 - Keep form state in React Hook Form with a zod schema instead of hand-rolled useState per field. Confidence: 0.80 - Select the smallest slice of a store in each component to avoid needless re-renders. Confidence: 0.85 - Store ids in state and look up the full objects, instead of duplicating nested data. Confidence: 0.80 - Use optimistic updates for quick user actions and roll back on error. Confidence: 0.75 - Never mutate state objects in place; return new objects or use Immer for deep updates. Confidence: 0.90 - Keep persisted state small and versioned when saving it to localStorage. Confidence: 0.75 - Reset component state by changing its key instead of writing reset effects. Confidence: 0.80 - Colocate stores with the feature that owns them rather than in one global store folder. Confidence: 0.75 - Type every store and context value explicitly and avoid any in state shapes. Confidence: 0.90
© f · CC0-1.0 · f/prompts.chat