React State Management

What problem does it solve?

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).

Core Features & Use Cases

• Zustand Integration: Implement global and local UI state with a lightweight, performant store.
• Custom Hooks with Cleanup: Create reusable hooks that manage side effects and prevent memory leaks using useEffect cleanup patterns.
• Server-First Data Fetching: Guides on using Next.js Server Components for initial data fetching, reserving useEffect for client-side interactions like polling or event listeners.
• Use Case: Manage the open/closed state of a modal, user preferences (theme), or form input values without causing unnecessary re-renders or memory issues.

Quick Start

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.