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 கடந்து செல்லலை அல்ல।