Part 07 · Production Labs · 7.3

8 lab React production UI

Dùng Order + Payment API của Part 16 làm domain xuyên suốt. Mỗi lab phải chứng minh loading, error, empty, partial, unauthorized và accessibility — không chỉ nộp screenshot happy path.

Quy ước bàn giao: mỗi lab gồm code chạy được, test tự động, README quyết định/trade-off và evidence trước–sau khi sửa. Dữ liệu test phải tái hiện được race/failure, không phụ thuộc thao tác may mắn.

Lab 01 · Render và identity laboratory

Xây danh sách order có reorder, insert/delete, row-local draft, focus và expanded state. Cố ý dùng index key, random key, nested component declaration và mutation trong render để quan sát lỗi dưới Strict Mode.

Việc phải làm

Viết scenario tự động chứng minh state/focus gắn nhầm order sau reorder.
Đo mount/unmount khi dùng random key và nested component type.
Sửa bằng stable order ID, component type ổn định và pure immutable render.
Giải thích trường hợp dùng key để reset form theo entity.

Acceptance: reorder không đổi draft/focus sang order khác; Strict Mode không tạo side effect từ render; test fail trên bản lỗi và pass sau khi sửa.

Lab 02 · State model và typed form

Xây Order form, so sánh controlled/uncontrolled field, rồi dùng reducer và discriminated state cho idle, editing, submitting, success, error.

Việc phải làm

Hỗ trợ client validation, async validation và server field errors.
Ngăn duplicate submit nhưng giữ keyboard/screen-reader feedback.
Giữ user input sau recoverable error và reset đúng khi order identity đổi.
Unit test reducer invariants, impossible transition và unknown action policy.

Acceptance: input không đổi controlled mode; pending/error/success có semantic status; double click/Enter không tạo hai command; server validation vẫn authoritative.

Lab 03 · Effect và race clinic

Tạo một detail/search screen có effect loop, stale closure, missing subscription cleanup và response về sai thứ tự. Trước tiên ghi test tái hiện, sau đó loại Effect không cần thiết và sửa request lifecycle.

Việc phải làm

Chuyển derived value và event-specific request ra khỏi Effect không phù hợp.
Thêm typed debounce cho search input nhưng vẫn dùng AbortSignal và active request identity/ignore stale result; debounce giảm số lần gọi, không thay race control.
Cleanup debounce timer, listener và connection bằng đúng function/resource instance.
Test rapid typing/navigation, unmount và Strict Mode setup-cleanup-setup.

Acceptance: debounce có flush/cancel semantics rõ; response cũ không overwrite order mới; không leak timer/listener; exhaustive-deps không bị suppress; network trace chứng minh cancellation hoặc stale-result guard.

Lab 04 · Context, custom Hook và external store

Thiết kế ownership cho auth, theme và order draft. Profile một provider object rộng gây rerender, rồi split theo responsibility/change frequency. Viết useOnlineStatus và useOrderSubscription.

Việc phải làm

Document value nào local, Context, URL, server cache hay external store.
Custom Hooks expose domain action và failure/cleanup contract rõ.
Tích hợp external store bằng useSyncExternalStore với cached immutable snapshot.
Cung cấp getServerSnapshot và test hydration snapshot khớp.

Acceptance: Profiler cho thấy consumer không liên quan giảm render; unsubscribe hoạt động; unchanged store giữ snapshot identity; SSR/hydration không mismatch.

Lab 05 · Server state và optimistic mutation

Cấu hình query key, cache freshness, prefetch và invalidation cho order detail/list. Thực hiện create/cancel order optimistic với rollback/reconcile và idempotency key.

Việc phải làm

Mô phỏng timeout unknown outcome, conflict, unauthorized, offline và retry.
Không copy canonical response vào global/local state; draft phải có owner riêng.
Giữ current content trong background refetch và phân biệt first load.
Test concurrent mutations cùng entity và invalidation đúng phạm vi.

Acceptance: không duplicate command khi retry; optimistic row có pending/failure state; rollback/reconcile deterministic; cache không collision giữa tenant/filter/page.

Lab 06 · Routing, errors, security và accessibility

Tạo nested routes/loaders/actions/error boundaries cho order list/detail/payment. Bao phủ unauthorized, forbidden, not found và recoverable server error; giữ title, focus và scroll semantics.

Việc phải làm

Dialog/form/error summary dùng được hoàn toàn bằng keyboard.
Dynamic save/payment status được announce bằng live region phù hợp.
Render rich note có XSS payload fixture qua sanitizer đáng tin.
Gọi API trực tiếp để chứng minh server authz, không chỉ route guard.

Acceptance: deep link/reload/back-forward đúng; error boundary phục hồi đúng region; injected HTML không execute; accessibility tree và manual keyboard flow đạt.

Lab 07 · Performance và delivery

Dùng React Profiler và browser Performance trace tìm wide rerender, expensive list, Context churn, layout work và duplicate bundle. Chỉ áp optimization sau khi lưu baseline.

Việc phải làm

Thử colocation, split component/context, windowing và route code split.
Dùng memoization chỉ cho hotspot đã đo, kiểm prop identity/comparator.
Đo route JS, LCP, INP, CLS và critical interaction trên mobile throttle.
Kiểm lazy fallback, prefetch budget và virtualized keyboard behavior.

Acceptance: nộp trace/Profile trước–sau, metric và cách tái hiện; optimization không làm sai state/focus/a11y; production build đạt budget đã định.

Lab 08 · SSR, hydration và test pyramid

SSR/stream/hydrate một route Order, cố ý tạo mismatch bằng time, random và browser-only branch rồi sửa bằng deterministic data, useId hoặc client boundary đúng chỗ.

Việc phải làm

Unit reducer/domain logic; component integration bằng role/name/events.
Mock network boundary cho loading, race, error và optimistic workflow.
Browser E2E critical order/payment flow và accessibility checks.
Thiết kế canary, error/RUM telemetry, source-map control và rollback plan.

Acceptance: không suppress hydration mismatch bừa; server/client initial output khớp; deep link hoạt động từ clean browser; release version quan sát và rollback được.

Rubric đánh giá

Mức	Tiêu chí bắt buộc	Evidence
1 · Functional	Components chạy đúng happy path và code có thể reproduce.	Demo + smoke tests
2 · Production-ready	State/effect/data/error/a11y đúng, failure states có tests.	Automated suite + boundary fixtures
3 · Senior	Race, recovery, performance, hydration và security có quyết định/trade-off.	Trace, metrics, threat/failure notes, rollback plan