React examples
The React hub collects examples that turn on component rendering rather than raw DOM calls. State updates with useState, values derived during render instead of after it, context that avoids prop drilling, controlled form fields, and effects that subscribe and clean up correctly are all represented. Every entry records the React version it was verified against, the props or hook signature it assumes, and the rendering mistake that makes the same code fail. Because these examples keep their canonical URL under JavaScript or TypeScript, this hub is the browse path for framework-specific behaviour: use the task groups to see whether the answer belongs in state, in render, or in an effect at all.
7 published examples in 4 taskgroups. Hub pages list every Example in exactly one task group.
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.
Transform data
1 exampleReshape collections and records in memory into the structure the next step needs.
Transform server records into the view model a component renders
Map validated server records onto the fields a component renders, keeping fallback text, badge labels, and time formatting in one reviewable function instead of in the markup.
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
- Related topic: Data Transformation
- Related topic: Fetch and HTTP
- Related topic: Form Validation
- Related topic: React State
- Or search all examples: Search