Prop drilling คือการส่งข้อมูลผ่านคอมโพเนนต์ระดับกลางมากมายที่ไม่ได้ใช้มันเอง เพียงเพื่อให้ถึงคอมโพเนนต์ที่ซ้อนลึกซึ่งต้องการมัน มันน่าเบื่อและทำให้คอมโพเนนต์เชื่อมโยงกับข้อมูลที่พวกมันไม่สนใจ
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header และ Nav ต้องยอมรับและส่งต่อ user แม้ว่าพวกมันไม่ได้ใช้มัน — เสียงดัง, อ่อนแอ (เปลี่ยนชื่อ prop และแก้ไขทุกชั้น) และการเชื่อมต่อคอมโพเนนต์ที่ไม่เกี่ยวข้อง
const UserContext = createContext(null);
function App() {
const [user] = useState({ name: "Ann" });
return (
<UserContext.Provider value={user}> {/* provide once at the top */}
<Layout /> {/* no user prop needed anywhere */}
</UserContext.Provider>
);
}
function Avatar() {
const user = useContext(UserContext); // consume directly, skip the middle
return <img alt={user.name} />;
}
Context ช่วยให้ลูกหลานใด ๆ อ่านค่าได้โดยตรง โดยข้ามชั้นกลาง
✓ Context API → for app-wide/subtree data (theme, user, locale)
✓ State libraries → Zustand/Redux/Jotai — components subscribe to the store directly
✓ Component composition → pass JSX as children instead of data through props
// composition: let the parent compose the tree, passing the leaf directly
<Layout><Nav><Avatar user={user} /></Nav></Layout>
A little prop drilling (1–2 levels) is FINE and often clearer than adding Context.
Reach for Context/stores when drilling becomes deep or widespread.
Prop drilling เป็นจุดอ่างเก้าทั่วไปที่บ่งชี้ว่าข้อมูลจำเป็นต้องใช้กันอย่างแพร่หลาย — การตระหนักรู้ว่านี่บอกคุณว่าเมื่อใดควรใช้ Context, ไลบรารีสถานะ หรือการประกอบ
การหลีกเลี่ยงมัน (เมื่อมันลึกจริง ๆ) ทำให้คอมโพเนนต์ยังคงแยกและดูแลรักษาได้
แต่การพิจารณาสำคัญ: การ drilling ตื้นเป็นที่ยอมรับและง่ายกว่าการแยกออกจากกันแต่เนิ่นเสมอ; เป้าหมายคือกำจัด การส่งต่อที่ลึก ซ้ำ ๆ ไม่ใช่ prop passing ทั้งหมด