react-state-patterns

Name: react-state-patterns
Availability: InStock
Author: shakesoft

Implements React useState patterns for ASP.NET Zero CRUD operations and form handling.

Updated May 22, 2026

Search Tags:#typescript #state management #react #crud #form handling #usestate #aspnet zero

Ready to run

npx skills add https://github.com/shakesoft/timekeeper --skill react-state-patterns-shakesoft

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-state-patterns
Source: https://github.com/shakesoft/timekeeper/tree/main/.cursor/skills/react-state-patterns
Command: npx skills add https://github.com/shakesoft/timekeeper --skill react-state-patterns-shakesoft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Managing loading, error, form, and selection state in React CRUD interfaces often leads to inconsistent, ad-hoc code. This Skill provides standardized useState patterns for building CRUD pages against ASP.NET Zero backends. ## Core Features & Use Cases - API State Pattern: A reusable useApiState hook that tracks data, loading, and error states with setLoading, setData, and setError transitions. - CRUD State Conventions: Standard state variables for lists, selected items, modal visibility, and saving flags. - Form State Handling: Controlled form inputs with handleChange and handleSubmit patterns that POST DTOs to ASP.NET Zero endpoints and refresh data. - Use Case: When building a product management page, apply these patterns to fetch products, open a create/edit modal, submit a CreateProductDto, and reload the list. ## Quick Start Ask the AI to scaffold a React CRUD page for an ASP.NET Zero entity using these state management patterns.

Frequently Asked Questions about react-state-patterns

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

FAQPage Schema

How do I manage loading and error state in React API calls?▼

Use a single state object with data, loading, and error fields, updated through setLoading, setData, and setError transitions. The useApiState hook in this Skill encapsulates this pattern so each API call has consistent state handling.

How to handle form state in React with TypeScript DTOs?▼

Initialize useState with the DTO shape, update fields via a generic handleChange that spreads previous state keyed by input name, and submit with handleSubmit that POSTs the DTO. This keeps form values typed and synchronized with the backend contract.

What state variables does a React CRUD page need?▼

A typical CRUD page needs a list array, a selected item for editing, a boolean for modal visibility, a saving flag for submit operations, and a loading flag for fetches. These five states cover list display, editing, and submission flows.

Does this pattern work with ASP.NET Zero backend endpoints?▼

Yes, the form submit pattern posts JSON DTOs to ASP.NET Zero-style endpoints such as /Product/CreateProduct and then refetches the list. It assumes a fetch-based apiCall helper and standard REST conventions.

When should I use useState instead of a state management library?▼

Local useState is sufficient for page-scoped CRUD state like forms, modals, and fetched lists. Consider a global store only when state must be shared across many unrelated components or persisted across routes.