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
  • Bài học (7)
  • Giải Phẫu Cấu Trúc Thư Mục Dự Án React & Vòng Đời Bootstrapping15m•beginner
  • Bản chất của JSX & Mental Model Render trong React15m•beginner
  • Props, Tính Bất Biến & Pattern Component Composition15m•beginner
  • Làm chủ State với useState & Cơ chế Batching18m•beginner
  • React Events, State Modeling & Lifting State20m•beginner
  • Rendering Danh Sách, Keys & Điều Kiện Hiển Thị Chuẩn16m•beginner
  • State Placement: Local, URL, Server, Global hay Form?20m•intermediate
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
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 Core Foundations
intermediate
20 phút
#State Architecture
#URL State
#Server State
#Global State

State Placement: Local, URL, Server, Global hay Form?

Dùng cây quyết định để đặt state đúng nơi thay vì đưa mọi thứ vào useState, Context hoặc Zustand.

Core Mental Model

Phân loại state theo owner và vòng đời: UI cục bộ thuộc component; trạng thái cần chia sẻ/bookmark thuộc URL; dữ liệu remote thuộc server-state cache; dữ liệu client dùng xuyên cây mới cân nhắc Context/store; dữ liệu nhập tạm thuộc form.

Key Takeaways & Principles

Giữ state gần nơi sử dụng nhất và chỉ nâng lên khi có consumer thứ hai hoặc cần duy trì qua navigation.
Filter, sort, page và tab cần share/bookmark thường thuộc URL search params.
Dữ liệu API có freshness, retry và invalidation là server state; tránh copy sang Zustand/Redux nếu không có lý do rõ ràng.
Context/store phù hợp cho client state dùng rộng như theme, session view model hoặc draft liên màn hình; form library quản lý field/touched/errors.