The same catalogue, in React
The same catalogue, rebuilt with components. The interesting part is not that it works — it is which of the problems from build 03 disappear, which stay exactly as hard, and which ones React hands back to you with a sharper edge. The rendering goes away. The race condition does not.
Builds on React
What you end up with
- A component tree where every piece of state has exactly one owner and the children only report.
- Filtering and sorting as derived values, so the list and the query can never disagree.
- A controlled form with one change handler, real validation and focus moved to the first problem.
- A custom hook holding the logic, so the component is markup again.
- Data loaded in an effect, with cleanup — and the stale response that ruins a search box already dropped.
-
React 18 and Babel are loaded for you, so the JSX in the editor is compiled in the page. Start with the shape: an
Appthat holds the data, aCardsthat draws a list, and aCardthat draws one door and knows nothing else.Not finished yet
-
The search box and the list both need the query, so it lives in their closest common parent and comes down as props. The visible list is computed while rendering — the moment you keep it in
useStateand update it in an effect, you have two truths.Not finished yet
-
The same three rules as in build 03 — every problem at once, each message beside its field, focus moved — but now the form is a component with its own state, and the only thing it tells the parent is "here is a door".
Not finished yet
-
Appis now doing three jobs: holding state, deriving a list and drawing a page. The first two move into a hook — not for reuse, but because a component you can read in one screen is a component you can change.Not finished yet
-
The list now comes from somewhere slow. This is the one part of build 03 that React does not make easier: the four states are still yours, and the stale-response race is still yours. The effect is five lines; the
ignoreflag is the important one.Not finished yet
Last step — finish it and the build is yours.
When it is finished