Build the safeguards
Eight explained steps, a source example and a checkpoint at each decision.
Read the tutorialReact / TypeScript / Product engineering
Run it. Change it. Verify it.
Start in your browser, then take the complete React Reconciliation Lab into an independent local environment.
Try it without installing a toolchain
- Open the playground and keep its default scenario.
- Run the comparison and read the results before opening the code.
- Change the scenario, run again, and identify which decision changed.
- Open View the code, choose a source file and read the explanation above it.
- Reset the environment, including a run that is still pending.
Run your downloaded copy
Download and extract the ZIP into a new folder. With Python 3 installed, open a terminal in that folder and run the command below. It serves only this package on loopback; opening index.html directly is insufficient for workers and WebAssembly.
python preview.pyOpen http://127.0.0.1:4210/ in your browser. Stop the server with Ctrl+C. The prebuilt preview needs no dependency installation and makes no automatic requests to another site. The source code and notices are included alongside it.
Run the native exercise
The commands below start in the extracted package root. Node-based examples require Node 24 or later; the Go adapter requires Go 1.27 or later; the Python adapter requires Python 3.11 or later. Install only the toolchain used by this lab. Exact dependency versions and the Node lockfile are in the download.
npm ci
npm test
npm run rebuild
python preview.pyA rejected save returns the safeguarded editor to two seats. A competing edit preserves the server’s newer four-seat record. A successful save updates the safeguarded summary to three seats.
Read GETTING_STARTED.md for the native request examples and shutdown steps. Native servers bind to 127.0.0.1. The optional monitoring containers expose only loopback ports. They are a separate exercise from the browser preview.
Make one meaningful change
Add a second editable field and a field-level validation error. Preserve an unsaved draft when a conflict arrives, then offer an explicit review-and-retry action instead of silently overwriting the newer record.
Add the expected result first, reproduce the failure, repair it, then rerun the native and browser checks. Use npm run rebuild for the Node/browser examples. The Go package includes rebuild_wasm.py; the Python package includes refresh_source.py.
Record what you learned
Capture the scenario, edition, input records, observed outcome and the test that checks it. Explain one alternative you rejected and why. Avoid converting a small local result into a throughput, security or accuracy claim about a production system.
Read the primary documentation
Kindred’s full-stack role emphasizes React/Next.js, interface craft and ownership through the backend.
Choose your next step
Compare the alternatives
Understand where each pattern helps and which tradeoffs remain.
Compare approachesRun and extend it locally
Download the independent environment, run the native checks and try a specific extension.
Open the how-to guideLab discussion / React Reconciliation Lab
What would you try next?
Ask about the code, compare an approach, or describe an edge case. Reader comments are reviewed before publication.
Code walkthrough
Follow the implementation in code.
These short excerpts connect the lab’s behavior to its implementation. Each example links to the full tutorial step for its context, tradeoffs and checkpoint. Names and dependencies belong to that source; the excerpts are not standalone programs.
Make rejection a normal result
The fixture rejects six seats because its room limit is four. The broken implementation ignores that result and leaves six visible. The safeguarded implementation displays the confirmed record and a specific reason. In a larger editor you can preserve the rejected draft separately so the person can repair it.
if (!result.ok) {
editor = result.record;
message = result.reason;
}Detect a competing edit
The conflict example advances the server record to version two before your version-one save arrives. The safeguarded server compares the submitted version with its current version and rejects the stale write. In production this decision must be atomic in the backend; a browser-only comparison cannot prevent competing writes.
if (requested.version !== current.version) {
return {ok: false, record: current, reason: "Review newer version"};
}Refresh every view that shares the record
The cache example accepts three seats. The broken editor updates, while its summary remains at two. The safeguard derives both from the confirmed result. A real query cache may invalidate a key or update a normalized entity; either way, enumerate the views whose meaning changed.
return {editor: result.record, summary: result.record};