Τι είναι prop drilling και πώς το αποφεύγετε;

Question

Accepted Answer

**Prop drilling** είναι η διαδοχή δεδομένων μέσω πολλών ενδιάμεσων συστατικών που δεν τα χρησιμοποιούν μόνα τους, απλώς για να τα φέρουν σε ένα βαθιά ένθετο συστατικό που το κάνει. Είναι κουραστικό και κάνει τα συστατικά να συνδέονται στενά με δεδομένα που δεν τους ενδιαφέρουν. ## Το πρόβλημα ```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` και `Nav` πρέπει όλα να δεχτούν και να προωθήσουν `user` ακόμα κι αν δεν το χρησιμοποιούν — θορυβώδες, εύθραυστο (μετονομάστε το prop και επεξεργαστείτε κάθε επίπεδο), και σύνδεση ασχέτων συστατικών. ## Λύση 1: Context (ενσωματωμένο) ```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 επιτρέπει σε οποιοδήποτε απόγονο να διαβάσει την τιμή απευθείας, παρακάμπτοντας τα ενδιάμεσα επίπεδα. ## Λύση 2 και πέρα ```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 ``` ## Μην υπερδιορθώσετε ```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. ``` ## Γιατί είναι σημαντικό Prop drilling είναι ένα κοινό σημείο πόνου που υποδηλώνει ότι τα δεδομένα είναι απαραίτητα ευρέως — η αναγνώρισή του σας λέει πότε να καταφύγετε σε Context, μια βιβλιοθήκη κατάστασης ή σύνθεση. Αποφεύγοντάς το (όταν είναι πραγματικά βαθύ) κρατά τα συστατικά αποσυνδεδεμένα και συντηρήσιμα. Αλλά η κρίση σημαίνει: το ρηχό drilling είναι αποδεκτό και απλούστερο από τη πρόωρη αφαίρεση· ο στόχος είναι να εξαλείψετε την *βαθιά, επαναλαμβανόμενη* προώθηση, όχι όλα τα prop passing.