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
  • Bài học (4)
  • Quy chuẩn Viết Custom Component & Typescript (Enterprise)15m•intermediate
  • Chuyên sâu Form: Controlled vs Uncontrolled Components18m•intermediate
  • Tối ưu Memoization thủ công: useMemo & useCallback15m•intermediate
  • Khoanh vùng lỗi với React Error Boundary & Next.js error.tsx18m•advanced
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
React Component Architecture & Forms
intermediate
15 phút
#React Standard
#useMemo
#useCallback
#Performance

Tối ưu Memoization thủ công: useMemo & useCallback

Khi không có Compiler, học cách dùng useMemo, useCallback và React.memo chuẩn xác để tránh re-render thừa.

Core Mental Model

Mỗi lần Parent re-render, mọi function literal () => {} đều tạo ra tham chiếu mới. useCallback giữ nguyên tham chiếu giữa các lần render.

Key Takeaways & Principles

Dùng useMemo cho các tính toán nặng (expensive computations) hoặc giữ tham chiếu Object/Array.
Dùng useCallback giữ tham chiếu callback function khi truyền xuống Component con bọc React.memo.
Luôn khai báo đúng và đủ mảng dependency array để tránh bug Stale Closure.