Mikä on prop drilling ja miten vältät sen?

Question

Accepted Answer

**Prop drilling** on tiedon välittäminen useiden välikomponenttien kautta, jotka eivät itse käytä sitä, vain saadakseen sen syvään sisäkkäiselle komponentille, joka kyllä käyttää. Se on työlästä ja tekee komponenteista tiukasti sidoksissa tietoihin, joista ne eivät välitä. ## Ongelma ```jsx // `user` is only needed by Avatar, but must pass through every layer function App() { const [user] = useState({ name: "Ann" }); return ; // App → Layout } function Layout({ user }) { return

; // Layout → Header (doesn't use it) } function Header({ user }) { return

; // Header → Nav (doesn't use it) } function Nav({ user }) { return ; // FINALLY used here } ``` `Layout`, `Header` ja `Nav` kaikki joutuvat hyväksymään ja välittämään `user`-propia vaikka ne eivät käyttäisivät sitä — meluisa, hauras (nimeä prop uudelleen ja muokkaa jokainen kerros), ja sitoo keskenään liittymättömiä komponentteja. ## Ratkaisu 1: Context (sisäänrakennettu) ```jsx const UserContext = createContext(null); function App() { const [user] = useState({ name: "Ann" }); return ( {/* provide once at the top */} {/* no user prop needed anywhere */} ); } function Avatar() { const user = useContext(UserContext); // consume directly, skip the middle return {user.name}

; } ``` Context sallii minkä tahansa jälkeläisen lukea arvon suoraan, ohittamalla välikerrokset. ## Ratkaisu 2 ja sen jälkeen ```text ✓ 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 ``` ```jsx // composition: let the parent compose the tree, passing the leaf directly ``` ## Älä ylikorjaa ```text 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. ``` ## Miksi se on tärkeää Prop drilling on yleinen ongelma, joka ilmaisee, että tietoa tarvitaan laajasti — sen tunnistaminen kertoo sinulle, milloin käyttää Contextia, tilakirjastoa tai koostumista. Sen välttäminen (kun se on todella syvällä) pitää komponentit irrotettuna ja ylläpidettävänä. Mutta harkinta on tärkeää: pinnallinen drilling on hyväksyttävää ja yksinkertaisempaa kuin liian aikainen abstraktion; tavoitteena on poistaa *syvä, toistuva* välittäminen, ei kaikki prop-välittäminen.