react-state-patterns

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.

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.

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.

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.

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.