Trạng thái: nguồn cơn của mọi bug giao diện
"State" (trạng thái) là dữ liệu giao diện đang giữ: user đăng nhập là ai, giỏ hàng có gì, danh sách đang hiển thị. Quản lý state lộn xộn = giao diện lúc đúng lúc sai. Bài này giúp bạn chọn đúng công cụ và đồng bộ real-time với DB.
Phân loại state để chọn đúng công cụ
| Loại state | Ví dụ | Giải pháp |
|---|---|---|
| Server state | Danh sách course từ DB | Fetch trực tiếp (Server Component) hoặc thư viện như TanStack Query |
| Global client state | User đang đăng nhập, theme | React Context (đơn giản) hoặc Zustand (gọn, mạnh) |
| Local state | Ô input đang gõ, modal mở/đóng | useState ngay trong component |
💡 Sai lầm phổ biến: nhồi mọi thứ vào global state. Phần lớn dữ liệu là server state — hãy để nó gần nơi fetch, đừng biến tất cả thành global.
React Context vs Zustand
- React Context: có sẵn trong React, hợp cho state đơn giản, ít thay đổi (theme, user). Nhược: gây re-render rộng nếu lạm dụng.
- Zustand: thư viện nhỏ gọn, API đơn giản, tránh re-render thừa, dễ mở rộng. Hợp khi global state phức tạp hơn.
Prompt mẫu: "Tạo một Zustand store quản lý giỏ hàng: thêm/xoá sản phẩm, tính tổng tiền. Viết kèm hook useCart và ví dụ dùng trong component."
Real-time sync với Supabase
Đây là siêu năng lực: dữ liệu đổi trong DB → giao diện mọi user tự cập nhật, không cần F5.
// Lắng nghe thay đổi bảng messages theo thời gian thực
const channel = supabase
.channel('room-1')
.on('postgres_changes',
{ event: 'INSERT', schema: 'public', table: 'messages' },
(payload) => {
setMessages((prev) => [...prev, payload.new]); // thêm tin nhắn mới vào UI
})
.subscribe();
// Nhớ dọn dẹp khi component unmount
return () => { supabase.removeChannel(channel); };
Use case: chat, bảng cộng tác, dashboard live, thông báo.
⚠️ Bài học từ thực tế: luôn dọn dẹp subscription khi component unmount (
removeChannel) và đừngawaitcác lời gọi khác bên trong callback củaonAuthStateChange— dễ gây deadlock/treo. Đây là lỗi rất hay gặp khi vibe code phần realtime.
Bài tập
Dựng một danh sách đơn giản (todo/messages) đọc từ Supabase, bật real-time để khi thêm bản ghi ở tab này thì tab kia tự cập nhật. Nhờ AI viết phần subscribe + cleanup đúng chuẩn.