state-management

The state-management skill provides structured approaches for managing different types of state in React applications. It focuses on local UI state, shared UI state, form state, and server state, offering patterns and libraries suitable for each scenario. By applying this skill, developers can efficiently organize state logic, avoid unnecessary re-renders, and maintain consistent application behavior across components. It emphasizes using the right tool for the right type of state, such as TanStack Query for server data, React Hook Form for form handling, and Zustand or Jotai for shared or complex client-side state.

Key features include simple and complex global state management using Zustand, which allows creating stores with slices for modular state organization and middleware support like persistence and developer tools. It also covers atomic state management with Jotai, supporting primitive atoms, derived atoms, writable atoms, async atoms, persisted atoms, and atom families for per-item state management. The skill provides clear examples of implementation patterns, usage of hooks, and strategies to prevent unnecessary component re-renders, enhancing both performance and maintainability.

This skill is ideal for frontend developers working with React who need a scalable and maintainable approach to handle application state. It is particularly useful for projects with multiple shared UI elements, complex workflows like shopping carts or multi-step forms, or applications requiring persistent state across sessions. Teams building dynamic, data-driven interfaces can benefit from applying these patterns to ensure predictable state behavior and a clear separation between server, local, and shared client states.