Implement Zustand stores and custom hooks for React client-side state.
npx skills add https://github.com/RomualdP/hoki --skill react-state-management
Please help me install this Agent Skill. Skill: React State Management Source: https://github.com/RomualdP/hoki/tree/main/.claude/skills/react-state-management Command: npx skills add https://github.com/RomualdP/hoki --skill react-state-management
This Skill prevents common React state management pitfalls like memory leaks and inefficient data fetching, ensuring robust and performant client-side applications. It clarifies when to use client-side state (Zustand) versus server-side data fetching (Server Components).
useEffect cleanup patterns.useEffect for client-side interactions like polling or event listeners.To manage client-side UI state for a new feature, create a Zustand store in features/my-feature/stores/my-feature.store.ts and a custom hook in features/my-feature/hooks/useMyFeature.ts.
Ensure all useEffect calls include a cleanup function.
High-intent search queries and answers about installing and using this skill.
Memory leaks in React occur when side effects aren't cleaned up. Always include a cleanup function in useEffect that removes event listeners, clears timers, or cancels subscriptions. Return a function from useEffect that reverses the effect—for example, returning `() => window.removeEventListener('resize', handler)` after adding a listener.
Use Zustand for global or shared UI state (modals, themes, user preferences) that multiple components need, or when you want to avoid prop drilling. Zustand is lightweight and performant for client-side state. Use useState for local component state that doesn't need to be shared across the app.
In Next.js 16, fetch initial data server-side using Server Components. Reserve client-side state (Zustand or custom hooks) for interactive features like polling, event listeners, or form input. This separation keeps the app performant and clarifies which state belongs on the server versus client.
Yes. Custom hooks with useEffect cleanup patterns manage side effects and prevent memory leaks. Structure them to initialize state, handle cleanup on unmount, and avoid unnecessary re-renders by specifying correct dependency arrays in useEffect.
Store form state (drafts, input values, validation status) using Zustand or custom hooks with synchronous and asynchronous actions. This approach keeps form logic reusable and decoupled from components, making it easier to handle validation and submission workflows.
Zustand manages client-side state only. In Next.js Server Components, fetch data server-side and pass it as props. Use Zustand on the client for interactive state like modal toggles or theme selection that Server Components cannot handle directly.
ynittoAutomate frontend unit testing for React components and Zustand stores.
anouar1991Inspect client-side storage and generate a structured usage report.
johnnystefanEnforce React 19 component patterns with React Query, Zustand, and Zod validation.
AI-Foundry-CoreManage React state across local, global, and server contexts.