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
22 phút
#Profiler
#Virtualization
#TanStack Virtual
#Performance

Profiling Hiệu Năng & Ảo Hóa Danh Sách (Virtualization)

Sử dụng React DevTools Profiler để phát hiện commit nghẽn và ảo hóa danh sách 10,000+ items với TanStack Virtual.

Core Mental Model

Tại một thời điểm, người dùng chỉ nhìn thấy một phần nhỏ của danh sách dài. Virtualization chỉ mount vùng đang nhìn thấy cộng một lượng overscan, rồi thay đổi các row được mount khi cuộn.

Key Takeaways & Principles

Dùng React DevTools Profiler (tab Flamegraph & Ranked chart) để xác định chính xác component nào render lâu và lý do re-render (Why did this render).
Cân nhắc virtualization khi profiling cho thấy số DOM node hoặc chi phí render/scroll của danh sách dài là nút thắt; không có ngưỡng item cố định đúng cho mọi giao diện.
Sử dụng `@tanstack/react-virtual` để quản lý vị trí cuộn mượt mà với dynamic height.