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
  • Bài học (5)
  • Mental Model useEffect: Đồng Bộ Dữ Liệu & Cleanup Chuẩn18m•intermediate
  • You Might Not Need an Effect & useEffectEvent20m•intermediate
  • useRef: Thao Tác DOM & Giữ Giá Trị Mutable Không Re-render16m•intermediate
  • useContext & Pattern Kết Hợp useReducer20m•intermediate
  • Thiết Kế Custom Hooks: Kỹ Nghệ Đóng Gói Headless UI Logic18m•intermediate
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
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
Quay lại danh sách Lộ trình
5 Bài học
Tổng thời lượng: ~92 phút

React Hooks Mastery

Làm chủ Hooks theo đúng mental model: Effect là đồng bộ với hệ thống ngoài, useEffectEvent cho logic không reactive, useRef, Context/Reducer và Custom Hooks.

Danh Sách Bài Học (Syllabus)

1

Mental Model useEffect: Đồng Bộ Dữ Liệu & Cleanup Chuẩn

intermediate

Từ bỏ thói quen coi useEffect là Lifecycle methods; học cách dùng useEffect để đồng bộ với hệ thống bên ngoài và xử lý race condition.

18 phút1 câu hỏi Quiz
2

You Might Not Need an Effect & useEffectEvent

intermediate

Loại bỏ effect dùng sai cho derived state/event và tách logic không reactive khỏi effect bằng useEffectEvent.

20 phút3 câu hỏi Quiz
3

useRef: Thao Tác DOM & Giữ Giá Trị Mutable Không Re-render

intermediate

Phân biệt khi nào cần useState vs useRef, cách truy cập phần tử DOM trực tiếp, lưu trữ Timer ID và cú pháp ref trong React.

16 phút1 câu hỏi Quiz
4

useContext & Pattern Kết Hợp useReducer

intermediate

Xây dựng hệ thống quản lý State nội bộ mạnh mẽ với Context API + useReducer, phân tách Context để tránh re-render diện rộng.

20 phút1 câu hỏi Quiz
5

Thiết Kế Custom Hooks: Kỹ Nghệ Đóng Gói Headless UI Logic

intermediate

Tạo ra các Custom Hooks tái sử dụng cao, phân biệt trả về Tuple vs Object, xử lý sự kiện trình duyệt và tuân thủ Rules of Hooks.

18 phút1 câu hỏi Quiz