Data Transformation
This topic groups examples where the interesting problem is shape rather than transport. Turning a record list into a lookup, grouping rows by a computed key, flattening nested structures without recursion surprises, sorting with stable rules, and mapping server records onto the view model a component actually renders are all covered here. Each page states the input shape, the output shape, and the order or duplicate behaviour the reader should expect, because those details decide whether a transformation is safe to reuse. Use the task groups to compare single-pass loops against chained array methods, then follow the relationships into fetch examples that produce the input and typing examples that keep the output honest.
In scope: Include examples that group, flatten, map, filter, sort, or re-model data structures. Out of scope: Exclude database or backend pipeline work, and exclude formatting-only examples with no structural change.
6 published examples across 2 primary task groups. Read the group heading to find the task you are solving, then pick the Example whose assumptions match your page.
Manage React state
2 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.
Transform data
4 examplesReshape collections and records in memory into the structure the next step needs.
Group array items by a computed key
Build a plain object whose keys come from each record, so lookups stop scanning the list and grouping stops needing a second pass.
Narrow an unknown API response with type guards
Layer small type predicates over an unknown response and return a narrowing result, so the compiler only exposes fields a runtime check has accepted.
Normalize an API payload into a typed list
Unwrap whichever envelope an API returns, check each row field by field, and get one typed list plus a named reason for every entry that was dropped.
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.
Adjacent navigation
- Parent: Home
- Browse by language: JavaScript
- Browse by language: TypeScript
- Other topics: CSS Layout
- Other topics: DOM Events
- Other topics: Fetch and HTTP
- Other topics: Form Validation
- Other topics: React State
- Or search: Search examples