Što je prop drilling i kako ga izbjegavate?

Question

Accepted Answer

**Prop drilling** je prosljeđivanje podataka kroz mnoge međukomponente koje ih ne koriste same, samo kako bi se podaci dostavio do duboko ugniježđene komponente koja ih koristi. To je zamorno i čini komponente čvrsto povezane s podacima koje ih ne zanimaju. ## Problem ```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` i `Nav` svi moraju prihvatiti i prosljeđivati `user` iako ga ne koriste — bučno, krhko (preimenujte svojstvo i uredite svaki sloj), i povezivanje nepovezanih komponenti. ## Rješenje 1: Context (ugrađeno) ```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 omogućuje bilo kojem potomku da izravno čita vrijednost, zaobilazeći međuslojeve. ## Rješenje 2 i dalje ```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 ``` ## Ne korigirajte previše ```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. ``` ## Zašto je to važno Prop drilling je česta bolna točka koja signalizira da su podaci potrebni na široj razini — prepoznavanje toga vam govori kada koristiti Context, biblioteku za stanje ili komponentu. Izbjegavanje ga (kada je zaista duboko) čini komponente nepoveznima i laganima za održavanje. Ali prosudba je bitna: plitko drilling je prihvatljivo i jednostavnije od preuranjene apstrakcije; cilj je eliminirati *duboko, ponavljajuće* prosljeđivanje, a ne sve prosljeđivanje svojstava.