Навыки react-zustand-patterns
⚛️

react-zustand-patterns

Безопасно 🌐 Доступ к сети⚙️ Внешние команды

Apply Zustand state management patterns

Zustand's simplicity hides timing complexities that cause subtle bugs. Learn patterns for synchronous set() behavior, stale closure prevention, async actions, and selector optimization to write reliable React state management.

Поддерживает: Claude Codex Code(CC)
📊 70 Адекватно
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «react-zustand-patterns». Explain why set() is synchronous but my component still shows old values after calling it

Ожидаемый результат:

  • set() updates the Zustand store immediately and synchronously
  • getState() will show the new value right after set()
  • However, React components only re-render in the next batched update cycle
  • The component function re-executes with old props/state until React processes the batch
  • Use useStore.getState() directly if you need immediate access outside component renders

Использование «react-zustand-patterns». How do I properly handle async data fetching in my Zustand store

Ожидаемый результат:

  • Use async keyword on the action function
  • Set loading state to true before the fetch
  • Read state after await using get() to ensure fresh values
  • Handle errors with try/catch and set error state
  • Return the promise so callers can await completion

Использование «react-zustand-patterns». Why is my React component re-rendering too often with Zustand

Ожидаемый результат:

  • Check if your selector returns a new object reference each time
  • Use shallow comparison with zustand/shallow or useShallow hook
  • Split into multiple selectors that return primitive values
  • Memoize derived values outside the selector if expensive

Аудит безопасности

Безопасно
v4 • 1/16/2026

Pure documentation skill containing educational content about Zustand state management patterns. All 52 static findings are false positives: markdown code block delimiters were misidentified as shell command execution, TypeScript syntax patterns as cryptographic algorithms, and feature documentation as executable code. No executable code, network calls, file system access, or credential handling exists.

2
Просканировано файлов
535
Проанализировано строк
2
находки
4
Всего аудитов

Факторы риска

🌐 Доступ к сети (3)
skill-report.json:6 SKILL.md:100 SKILL.md:111
⚙️ Внешние команды (35)
SKILL.md:10 SKILL.md:10 SKILL.md:16 SKILL.md:18-31 SKILL.md:31-34 SKILL.md:34-35 SKILL.md:35-47 SKILL.md:47 SKILL.md:47-49 SKILL.md:49-56 SKILL.md:56-81 SKILL.md:81-83 SKILL.md:83 SKILL.md:83 SKILL.md:83-89 SKILL.md:89-91 SKILL.md:91-124 SKILL.md:124-132 SKILL.md:132-157 SKILL.md:157-165 SKILL.md:165-188 SKILL.md:188-196 SKILL.md:196-216 SKILL.md:216-224 SKILL.md:224-255 SKILL.md:255-263 SKILL.md:263-296 SKILL.md:296-304 SKILL.md:304-324 SKILL.md:324-332 SKILL.md:332-333 SKILL.md:333-334 SKILL.md:334-335 SKILL.md:335-344 SKILL.md:344-356
Проверено: claude Посмотреть историю аудитов →

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
22
Сообщество
100
Безопасность
91
Соответствие спецификации

Что вы можете построить

Fix State Timing Bugs

Debug why components see stale values after set() calls due to React's batched render behavior

Build Async Store Actions

Implement robust async data fetching with proper loading states, error handling, and race condition prevention

Optimize Render Performance

Prevent unnecessary re-renders by fixing selectors that return new objects on every render cycle

Попробуйте эти промпты

Understanding set() 
Explain how set() works synchronously but React re-renders are batched. Show why getState() returns new values immediately but components might see old values
Stale Closures 
How do I avoid stale closures in Zustand? Show why data captured in a callback becomes stale after await and how to use get() correctly
Async Actions 
Write a complete async action pattern in Zustand with loading state, error handling, and race condition protection using get() checks
Selector Optimization 
Fix this selector that causes unnecessary re-renders: const data = useStore((s) => ({ name: s.name, count: s.count }))

Лучшие практики

  • Always use get() or getState() after any await to ensure fresh state values
  • Use shallow comparison or multiple selectors to prevent object creation in selectors
  • Add devtools middleware during development to trace state changes

Избегать

  • Relying on closure-captured values after async operations without using get()
  • Returning new objects from selectors that cause unnecessary component re-renders
  • Skipping the async keyword on store actions that return promises

Часто задаваемые вопросы

Is Zustand compatible with React Native?
Yes. Zustand works identically in React Native. Use persist middleware with asyncStorage for mobile persistence.
What Zustand versions are supported?
Patterns cover both Zustand 4.x and 5.x. Key differences include shallow import location and useShallow hook.
How do I debug state changes in production?
Remove devtools middleware in production builds. Use manual logging with get() for production debugging if needed.
Is my data safe with persist middleware?
Persist middleware stores data in localStorage or AsyncStorage. Avoid persisting sensitive data without encryption.
Why do my selectors cause infinite re-renders?
Selectors returning new objects (like { ...state }) change reference on every render. Use shallow comparison or multiple selectors.
How does Zustand compare to Redux?
Zustand is simpler with less boilerplate. Redux offers more middleware and debugging tools. Both handle async with middleware patterns.

Сведения для разработчиков

Автор

CJHarmath

Лицензия

MIT

Репозиторий

https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/react-zustand-patterns

Ссылка

main

Структура файлов

📄 SKILL.md