ਪ੍ਰੋਪ ਡ੍ਰਿਲਿੰਗ ਡਾਟਾ ਨੂੰ ਬਹੁਤ ਸਾਰੇ ਵਿਚਕਾਰਲੇ ਕੰਪੋਨੈਂਟਾਂ ਦੁਆਰਾ ਭੇਜਣਾ ਹੈ ਜੋ ਇਸ ਨੂੰ ਆਪ ਨਹੀਂ ਵਰਤਦੇ, ਸਿਰਫ ਇਸਨੂੰ ਗভੀਰ ਤੋਂ ਨੇਸਟਿਡ ਕੰਪੋਨੈਂਟ ਕੋਲ ਪਹੁੰਚਾਉਣ ਲਈ ਜੋ ਇਸ ਨੂੰ ਵਰਤਦਾ ਹੈ। ਇਹ ਤਕਲੀਫਦੇਹ ਹੈ ਅਤੇ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਡਾਟਾ ਨਾਲ ਜਕੜੀ ਨਾਲ ਜੋਰ ਦਿੰਦਾ ਹੈ ਜਿਸ ਦੀ ਉਨ੍ਹਾਂ ਪਰਵਾਹ ਨਹੀਂ ਹੈ।
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, ਅਤੇ Nav ਸਭ ਨੂੰ user ਨੂੰ ਸਵੀਕਾਰ ਕਰਨਾ ਅਤੇ ਅੱਗੇ ਭੇਜਣਾ ਪੈਂਦਾ ਹੈ ਭਾਵੇਂ ਉਹ ਇਸ ਨੂੰ ਵਰਤਦੇ ਨਹੀਂ — ਸ਼ੋਰਗੁਲ, ਨਾਜ਼ੁਕ (ਪ੍ਰੋਪ ਨੂੰ ਤਬਦੀਲ ਕਰੋ ਅਤੇ ਹਰ ਪਰਤ ਵਿੱਚ ਸੰਪਾਦਨ ਕਰੋ), ਅਤੇ ਅਸੰਬੰਧਿਤ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਜੋੜਨਾ।
const UserContext = createContext(null);
function App() {
const [user] = useState({ name: "Ann" });
return (
<UserContext.Provider value={user}> {/* provide once at the top */}
<Layout /> {/* no user prop needed anywhere */}
</UserContext.Provider>
);
}
function Avatar() {
const user = useContext(UserContext); // consume directly, skip the middle
return <img alt={user.name} />;
}
Context ਕਿਸੇ ਵੀ ਵੰਸ਼ਜ ਨੂੰ ਮੂਲ ਨੂੰ ਸਿੱਧੇ ਪੜ੍ਹਨ ਦਿੰਦਾ ਹੈ, ਵਿਚਕਾਰਲੀਆਂ ਪਰਤਾਂ ਨੂੰ ਬਾਈਪਾਸ ਕਰਦੇ ਹੋਏ।
✓ 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
// composition: let the parent compose the tree, passing the leaf directly
<Layout><Nav><Avatar user={user} /></Nav></Layout>
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.
ਪ੍ਰੋਪ ਡ੍ਰਿਲਿੰਗ ਇੱਕ ਆਮ ਸਮੱਸਿਆ ਹੈ ਜੋ ਸੰਕੇਤ ਕਰਦੀ ਹੈ ਕਿ ਡਾਟਾ ਵਿਆਪਕ ਰੂਪ ਵਿੱਚ ਲੋੜੀ ਹੈ — ਇਸਨੂੰ ਪਛਾਨਣਾ ਤੁਹਾਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ Context, ਸਟੇਟ ਲਾਇਬ੍ਰੇਰੀ, ਜਾਂ ਕੰਪੋਜਿਸ਼ਨ ਲਈ ਕਦੋਂ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
ਇਸਨੂੰ ਬਚਾਉਣਾ (ਜਦੋਂ ਇਹ ਸੱਚਮੁੱਚ ਗভੀਰ ਹੋਵੇ) ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਡਿਕਪਲ ਅਤੇ ਸੰਭਾਲਯੋਗ ਰੱਖਦਾ ਹੈ।
ਪਰ ਨਿਰਣਾ ਮਾਏਨੇ ਰੱਖਦਾ ਹੈ: ਤਲਛੱਟ ਡ੍ਰਿਲਿੰਗ ਸਵੀਕਾਰਯੋਗ ਹੈ ਅਤੇ ਸਮਾਈ ਅਮੂਰਤਤਾ ਨਾਲੋਂ ਸਰਲ ਹੈ; ਟੀਚਾ ਸਾਰੀ ਪ੍ਰੋਪ ਪਾਸਿੰਗ ਨੂੰ ਖਤਮ ਕਰਨਾ ਨਹੀਂ ਹੈ ਬਲਕਿ ਗਭੀਰ, ਦੁਹਰਾਈ ਗਈ ਅੱਗੇ ਭੇਜਣ ਨੂੰ ਖਤਮ ਕਰਨਾ ਹੈ।