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` গ্রহণ এবং ফরওয়ার্ড করতে হবে এমনকি যদি তারা এটি ব্যবহার না করে — জোরপূর্বক, ভঙ্গুর (প্রপটি পুনরায় নাম দিন এবং প্রতিটি স্তর সম্পাদনা করুন), এবং সম্পর্কহীন কম্পোনেন্টগুলিকে সংযুক্ত করুন। ## সমাধান 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, একটি state লাইব্রেরি, বা composition এর দিকে যেতে হবে। এটি এড়ানো (যখন এটি সত্যিই গভীর) কম্পোনেন্টগুলিকে বিচ্ছিন্ন এবং রক্ষণাবেক্ষণযোগ্য রাখে। কিন্তু বিচার গুরুত্বপূর্ণ: অগভীর drilling গ্রহণযোগ্য এবং প্রাথমিক বিমূর্তকরণের চেয়ে সহজ; লক্ষ্য হল *গভীর, পুনরাবৃত্তিমূলক* ফরওয়ার্ডিং দূর করা, সমস্ত prop পাস করা নয়।