React State
This topic is about state that React owns. Toggling a value without an extra render, deriving a total during render instead of copying it into state, clearing a form after submit without losing the caret, providing typed context across a tree, memoising an expensive computation, and separating effect setup from its cleanup are represented as separate examples with visible reasoning. Each page names the React version verified and describes the re-render count a wrong approach causes. Browse the task groups to decide whether your value belongs in state, in render, or in a effect at all, then follow relationships into the plain JavaScript listener and fetch examples underneath the same interaction.
In scope: Include examples whose correctness depends on React state, effects, context, or re-render behaviour. Out of scope: Exclude plain DOM event or styling work that does not involve the React render cycle.
6 published examples across 3 primary task groups. Read the group heading to find the task you are solving, then pick the Example whose assumptions match your page.
Fetch API data
1 exampleSend a request, await the response, and handle status, timeout, and cancellation behaviour.
Type a generic fetch hook that returns a known payload
Wrap fetch in a hook whose generic payload type is proven by a runtime predicate, so a component only renders data it has already accepted.
Manage React state
3 examplesDeclare, derive, update, and share component state inside the React render model.
Derive a running total during render instead of storing it
Compute a total from the items you already hold in state, so a quantity change cannot leave the stored sum out of step with the list.
Memoise a derived value with typed dependencies
Give a memoised derived value a typed dependency list and a stable key function, and see why dependency identity rather than the memo call decides whether the cache is ever reused.
Type a React context provider and its consumer
Type a React context with a null sentinel, expose a provider and a hook, and turn a missing provider into one named error instead of a screen full of undefined props.
Validate form input
2 examplesDecide whether entered data is acceptable and report the result to the person filling the form.
Type the validation state of a controlled form
Key field errors and touched flags off the form's own field names, so a renamed input cannot keep an orphaned message and the compiler lists every field left unhandled.
Validate a controlled React form on submit
Keep field values in state, run one rule pass on submit, and render messages beside the fields they describe without interrupting typing.
Adjacent navigation
- Parent: Home
- Browse by language: JavaScript
- Browse by language: TypeScript
- Other topics: CSS Layout
- Other topics: Data Transformation
- Other topics: DOM Events
- Other topics: Fetch and HTTP
- Other topics: Form Validation
- Or search: Search examples