Prop drilling là gì và làm sao để tránh nó?

Question

Accepted Answer

**Prop drilling** là việc truyền dữ liệu qua nhiều component trung gian vốn không tự dùng đến nó, chỉ để đưa nó tới một component lồng sâu cần đến. Nó vừa rườm rà vừa khiến các component bị gắn kết chặt với dữ liệu mà chúng không quan tâm. ## Vấn đề ```jsx // `user` chỉ cần cho Avatar, nhưng phải truyền qua mọi tầng function App() { const [user] = useState({ name: "Ann" }); return ; // App → Layout } function Layout({ user }) { return

; // Layout → Header (không dùng đến) } function Header({ user }) { return

; // Header → Nav (không dùng đến) } function Nav({ user }) { return ; // CUỐI CÙNG mới được dùng ở đây } ``` `Layout`, `Header`, và `Nav` đều phải nhận và chuyển tiếp `user` dù chúng không dùng đến — gây nhiễu, dễ vỡ (đổi tên prop là phải sửa mọi tầng), và gắn kết các component không liên quan. ## Giải pháp 1: Context (tích hợp sẵn) ```jsx const UserContext = createContext(null); function App() { const [user] = useState({ name: "Ann" }); return ( {/* cung cấp một lần ở trên cùng */} {/* không cần prop user ở bất cứ đâu */} ); } function Avatar() { const user = useContext(UserContext); // dùng trực tiếp, bỏ qua tầng giữa return {user.name}

; } ``` Context cho phép bất kỳ component con cháu nào đọc giá trị trực tiếp, bỏ qua các tầng trung gian. ## Giải pháp 2 & hơn nữa ```text ✓ Context API → cho dữ liệu toàn app/toàn nhánh (theme, user, locale) ✓ Thư viện state → Zustand/Redux/Jotai — component subscribe trực tiếp vào store ✓ Composition → truyền JSX qua children thay vì truyền dữ liệu qua props ``` ```jsx // composition: để component cha dựng cây, truyền thẳng leaf vào ``` ## Đừng sửa thái quá ```text Một chút prop drilling (1–2 tầng) là ỔN và thường rõ ràng hơn việc thêm Context. Dùng Context/store khi việc drilling trở nên sâu hoặc lan rộng. ``` ## Tại sao điều này quan trọng Prop drilling là một điểm đau phổ biến báo hiệu dữ liệu được cần ở phạm vi rộng — nhận ra nó cho bạn biết khi nào nên dùng đến Context, thư viện state, hay composition. Tránh nó (khi nó thực sự sâu) giúp các component giữ độ tách rời (decoupled) và dễ bảo trì. Nhưng sự cân nhắc rất quan trọng: drilling nông là chấp nhận được và đơn giản hơn việc trừu tượng hóa quá sớm; mục tiêu là loại bỏ việc chuyển tiếp *sâu và lặp đi lặp lại*, chứ không phải mọi việc truyền prop.