Posts
All the articles I've posted.
P1: Testing pyramid: Unit, Integration, E2E khác nhau ở đâu
Ba tầng của testing pyramid trong frontend, tiêu chí chọn viết loại test nào cho từng tình huống, và sai lầm phổ biến khi viết quá nhiều E2E test.
Redux: Store, Action, Reducer và Redux Toolkit
Ba nguyên tắc cốt lõi của Redux, cách viết Redux thuần và Redux Toolkit, kết nối component qua useSelector/useDispatch, xử lý async với createAsyncThunk, và so sánh với Context/React Query.
Optimistic Updates với React Query
Optimistic Update là gì, cách triển khai với useMutation qua onMutate/onError/onSettled, lưu snapshot để rollback, và khi nào nên/không nên dùng.
Component Lifecycle trong React: Mounting, Updating, Unmounting
Ba giai đoạn vòng đời component React: Mounting, Updating, Unmounting, đối chiếu class lifecycle method với useEffect, và cạm bẫy memory leak khi quên cleanup.
Validate Form với React Hook Form và Zod
Dùng Zod định nghĩa schema validate, kết nối vào React Hook Form qua zodResolver, sinh type TypeScript tự động từ schema, và các đánh đổi khi chọn thời điểm validate.
Controlled và Uncontrolled Components trong React
Controlled và Uncontrolled Component khác nhau ở đâu, khi nào nên dùng cách nào, cạm bẫy khi chuyển đổi giữa chừng, và cách xây một component hỗ trợ cả hai kiểu.
Hooks nâng cao: useReducer, useRef, useLayoutEffect
useReducer khi state phức tạp, useRef để giữ giá trị mutable không gây re-render, useLayoutEffect khi cần đo/chỉnh DOM trước khi trình duyệt paint, kèm ví dụ minh họa cho từng hook.
Tối ưu hiệu năng trong React
Vì sao component re-render, cách dùng React.memo/useMemo/useCallback đúng chỗ, vì sao Context gây re-render toàn bộ consumer, key trong danh sách, code splitting và virtualization.
Compound Components Pattern trong React
Compound Components Pattern giải quyết vấn đề gì, cách triển khai bằng Context và Static Properties, lợi ích so với props drilling, và đánh đổi cần lưu ý.
Container và Presentational Components trong React
Container (Smart) và Presentational (Dumb) Component là gì, lợi ích khi tách UI khỏi logic, và vì sao pattern này chuyển dần sang dùng custom hook sau khi React có Hooks.