ahooks

Manage React state with grouped updates and localStorage persistence.

4|1|Updated Aug 15, 2024
One-click install
npx skills add https://github.com/blockmatic-icebox/basilic-old --skill ahooks-blockmatic-icebox
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ahooks
Source: https://github.com/blockmatic-icebox/basilic-old/tree/main/.cursor/skills/ahooks-v3
Command: npx skills add https://github.com/blockmatic-icebox/basilic-old --skill ahooks-blockmatic-icebox

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Utility hooks for React state management - grouped state and localStorage persistence. Use when: managing grouped state that changes together, persisting state to localStorage, or coordinating state between URL and storage.

Core Features & Use Cases

  • useSetState for grouped state updates
  • useLocalStorageState for persistence across sessions
  • Coordination with other state management patterns (URL state, async data)

Quick Start

Use useSetState for grouped, non-URL state and persist critical preferences with useLocalStorageState.

Frequently Asked Questions about ahooks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage grouped React state that changes together without multiple useState calls?

Grouped React state updates are managed using the useSetState hook, which enforces merging multiple state properties that change together into a single update. This streamlines coordinating related UI state.

What is the best way to persist React state to localStorage across sessions?

Persisting React state to localStorage is handled by the useLocalStorageState hook, which synchronizes in-memory state with the storage layer. It ensures critical UI preferences survive session restarts.

Does this React state management approach work with TypeScript?

Yes, the state management hooks enforce TypeScript generics for type safety. It supports React 18+ and TypeScript v5+, ensuring grouped state and persisted storage updates are strictly typed.

How do I coordinate URL state with localStorage in React?

You can coordinate state between URL parameters and storage by combining useSetState for non-URL state with useLocalStorageState for persistence. This aligns in-memory, URL, and storage layers.

When should I use useSetState over standard useState for web development?

Use useSetState for grouped, non-URL state where multiple properties update simultaneously, preventing partial renders. Standard useState is better suited for isolated, independent values.

Can I use these hooks for async data and URL state coordination?

Yes, these hooks coordinate with other state management patterns including URL state and async data. They enforce structured updates while bridging in-memory and storage layers.