zustand-5
Zustand-5 covers modern state management patterns for client-side applications using Zustand. Master store creation, selector optimization to prevent unnecessary re-renders, persistence with localStorage, async data fetching, and the slices pattern for organizing complex state across multiple domains.
Zustand-5 teaches you how to build and manage client-side state with Zustand stores, selectors, and middleware.
AI-generated summary based on this skill's SKILL.md
Install
prowler-cloud/prowler/zustand-5 · repository language: Python
git clone https://github.com/prowler-cloud/prowler
cp -r prowler/skills/zustand-5 ~/.claude/skills/zustand-5npx skillfed install prowler-cloud/prowler/zustand-5Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create a zustand store?
Zustand-5 makes store creation straightforward using the `create` function. Define your state, actions, and selectors in a single hook. For example, a counter store combines initial state with methods that update it. Zustand automatically handles subscriptions and re-renders only components using changed state, making it simpler than Redux while maintaining full control over your client-side state management.
How can zustand selectors prevent rerender?
Zustand-5 selectors optimize re-renders by extracting only the state slice a component needs. Use `useShallow` for shallow comparison or write custom selectors that return specific values. When a selector's output hasn't changed, the component won't re-render even if other store state updates. This pattern is essential for performance in large applications with frequent state changes.
What is the zustand slices pattern for combining stores?
Zustand-5's slices pattern organizes complex state by composing multiple store slices into one. Each slice handles a domain (auth, ui, data), then merge them in a root store. This keeps code modular and maintainable as your application grows, preventing monolithic stores while preserving Zustand's simplicity and single-source-of-truth benefits.
How do I implement zustand persist middleware with localStorage?
Zustand-5 provides a persist middleware that automatically syncs store state to localStorage. Wrap your store with `persist()`, specify a storage key, and optionally configure which state properties to save. On app reload, persisted state restores automatically. This is ideal for user preferences, authentication tokens, and settings that should survive page refreshes.
Can zustand handle async actions like fetch requests?
Zustand-5 supports async actions natively—define actions that call async functions and update state when data arrives. No special middleware needed; just use async/await in your actions. Combine with selectors to track loading and error states. For complex async workflows, integrate middleware like immer for immutable updates or devtools for debugging.
How does zustand compare to redux for state management?
Zustand-5 is lighter and faster than Redux—no boilerplate, no action creators, no reducers. It scales from simple stores to complex multi-slice architectures. Redux excels in massive apps needing strict patterns and time-travel debugging; Zustand wins for most modern projects prioritizing developer experience and bundle size while maintaining full TypeScript support and middleware extensibility.
SKILL.md
rendered from the published skill — quoted content, verbatim
Basic Store
import { create } from "zustand";
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));
// Usage
function Counter() {
const { count, increment, decrement } = useCounterStore();
return (
<div>
<span>{count}</span>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}
Persist Middleware
```typescript import { create } from "zustand"; import { persist } from "zustand/middleware";
interface
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/zustand-5/SKILL.md