**Prop drilling** (còn được gọi là "threading") là thuật ngữ chỉ tiến trình mà bạn phải đi qua để có thể lấy dữ liệu cho các phần của React component tree. Cùng quan sát một ví dụ đơn giản với `stateful component` ```js function Toggle() { const [on, setOn] = React.useState(false); const toggle = () => setOn(o => !o); return (

The button is {on ? "on" : "off"}

); } ``` Chúng ta hãy thử chia nó thành 2 components: ```js function Toggle() { const [on, setOn] = React.useState(false); const toggle = () => setOn(o => !o); return ; } function Switch({ on, onToggle }) { return (

The button is {on ? "on" : "off"}

); } ``` Nói một cách đơn giản `Switch` component cần có tham chiếu tới `toggle` và `on` state, vậy nên chúng ta cần truyền props ở đây. Cùng refactor lại một lần nữa để thêm một layer khác vào component tree của chúng ta. ```js function Toggle() { const [on, setOn] = React.useState(false); const toggle = () => setOn(o => !o); return ; } function Switch({ on, onToggle }) { return (

); } function SwitchMessage({ on }) { return

The button is {on ? "on" : "off"}

; } function SwitchButton({ onToggle }) { return ; } ``` Đây chính là `prop drilling`. Để lấy được `on` state và `toggle` handler ở đúng chỗ ta cần chuyển (drill - thread) props thông qua Switch component. Bản thân `Switch` component không cần những giá trị này cho bản thân nó, nhưng ở đây ta vẫn phải chấp nhận và chuyển tiếp các props này xuống dưới các components con của nó.

Tại sao nên dùng fragment thay vì div?