dev-proPRO
OverviewLộ Trình HọcPhỏng VấnAI System
dev-pro— Thực chiến Frontend React, Next.js & Luyện phỏng vấn
contact@dev-pro.online•Code thật. Phỏng vấn thật.
Seri React Mastery8 Lộ trình · Sandbox
Seri React Mastery
8 tracks
T01
React Core Foundations0/7 hoàn thành
T02
React Hooks Mastery0/5 hoàn thành
T03
React Component Architecture & Forms0/4 hoàn thành
T04
React & Compiler: Modern Path0/4 hoàn thành
T05
Form Engineering: RHF + Zod + Server Actions0/2 hoàn thành
T06
Advanced React Performance Patterns0/4 hoàn thành
  • Bài học (4)
  • React Concurrency: useTransition & useDeferredValue18m•advanced
  • Pattern Kiến Trúc: Compound Components & Inversion of Control20m•advanced
  • Kiến Trúc Quản Lý State Toàn Cục với Zustand v520m•intermediate
  • Profiling Hiệu Năng & Ảo Hóa Danh Sách (Virtualization)22m•advanced
T07
Enterprise React Testing & Production Readiness0/5 hoàn thành
T08
Production Capstone: TeamBoard0/1 hoàn thành
Tiến độ React0/32 bài
Advanced React Performance Patterns
advanced
18 phút
#React Concurrency
#useTransition
#useDeferredValue
#Performance

React Concurrency: useTransition & useDeferredValue

Tạo giao diện mượt mà không bị đơ giật với Concurrent Rendering; phân biệt Urgent vs Non-urgent state transitions.

Core Mental Model

Không phải mọi cập nhật state đều có độ ưu tiên như nhau. Nhập phím vào ô input là khẩn cấp (Urgent - cần phản hồi tức thì), còn render lại danh sách 5000 kết quả tìm kiếm là chuyển cảnh không khẩn cấp (Non-urgent Transition - có thể tạm dừng/ngắt quãng để ưu tiên gõ phím).

Key Takeaways & Principles

`useTransition` đánh dấu một hoặc nhiều cập nhật state là không khẩn cấp; React có thể tạm ngắt render đó để ưu tiên tương tác khẩn cấp và cung cấp `isPending`.
`useDeferredValue` tạo một phiên bản có thể tụt lại phía sau của giá trị hiện tại, phù hợp khi bạn không kiểm soát nơi gọi setState hoặc muốn trì hoãn một cây render nặng.
Callback của `startTransition` chạy ngay trên main thread: API này không chuyển phép tính sang background thread và không thay thế Web Worker.
Hai API đều không phải debounce. `useDeferredValue` không giảm số request mạng; hãy debounce hoặc cache riêng nếu mục tiêu là giảm request.