Sai lầm và checklist React production
React app đáng tin không đo bằng số Hooks hay libraries. State phải có owner, failure phải có UX, interaction phải accessible, security phải nằm ở server boundary và optimization phải có evidence.
6 nhóm red flags
1. Effect thay cho data flow
Dùng Effect để tính derived state, xử lý user event hoặc đồng bộ state với state; suppress dependencies để tránh rerun. Hậu quả là extra render, stale closure, loop và flow khó theo dõi.
2. Identity không ổn định
Dùng index/random key, định nghĩa component lồng trong render hoặc mutate object/array tại chỗ. State, DOM, focus và memo cache có thể gắn sai entity hoặc bị reset liên tục.
3. Nhiều source of truth cho server data
Copy response vào Context, client store và local state; query key thiếu input, invalidation mơ hồ. Các view trở nên stale và optimistic update không thể reconcile đáng tin.
4. UI bị coi là security boundary
Route guard hoặc hidden button được xem như authorization; rich HTML đi thẳng vào dangerouslySetInnerHTML; secret được đưa vào client bundle/storage. Attacker không bị giới hạn bởi UI.
5. Memoization không có baseline
Memo mọi component/callback nhưng không profile network, layout, DOM size, Context churn hay bundle. Complexity tăng trong khi user metric không đổi hoặc comparator còn đắt hơn render.
6. Production gaps bị che
Suppress hydration warning, chỉ có snapshot/class-selector tests, bỏ keyboard/failure/race và không có release telemetry. Green CI không chứng minh app hoạt động trên browser và traffic thật.
Checklist năng lực cốt lõi
- Tôi giải thích được trigger, render, commit, purity và cách type/key/position quyết định state identity.
- Tôi model state tối thiểu, tránh redundant/contradictory state, cập nhật immutable và dùng queue/updater đúng.
- Tôi chỉ dùng Effect để synchronize external system; dependency phản ánh code và cleanup đối xứng setup.
- Tôi dùng ref/DOM imperative có giới hạn, hiểu commit timing, callback cleanup, measurement và focus accessibility.
- Tôi đặt local, form, reducer, URL, Context và shared workflow state ở đúng owner/lifetime.
- Tôi thiết kế custom Hook/external store có contract, cached snapshot, subscription cleanup và SSR semantics.
- Tôi quản query identity, freshness, race, mutation, optimistic rollback/reconcile và unknown outcome.
- Tôi đặt loading/error/routing/security/accessibility boundaries theo product recovery domain.
- Tôi profile interaction trước memo, windowing hoặc code split và hiểu phạm vi React Compiler không giải quyết.
- Tôi test behavior và bảo đảm SSR/hydration/build/cache/telemetry/rollback deterministic.
Definition of Done cho Part 07
- Trả lời đúng ít nhất 24/30 câu, mỗi câu có mental model hoặc failure mode thay vì chỉ tên API; trình bày được ít nhất 8 câu bằng tiếng Anh rõ ràng.
- Hoàn thành ít nhất 6/8 lab tổng hợp, bắt buộc gồm race/data/accessibility/performance.
- Có typed Order UI bao phủ loading, empty, partial, failure, unknown, offline và unauthorized states.
- Có evidence từ tests, Profiler/Web Vitals, hydration/browser checks và một release/rollback plan.
Senior review prompts
- Nếu bỏ một Effect, source of truth và event ownership chuyển về đâu?
- Nếu mutation timeout sau khi server commit, retry có tạo duplicate operation không?
- Nếu Context update mỗi keystroke, consumer nào thật sự phải render?
- Nếu server và client ở hai version trong lúc deploy, cache/API contract có chịu được không?
- Nếu mouse không dùng được và request thất bại, user có hoàn thành flow bằng keyboard/screen reader không?