"state लाई माथि उठाउनु" को अर्थ के हो, र यो prop drilling सँग कसरी सम्बन्धित छ?

जब दुई components ले एही state साझा गर्न आवश्यक हुन्छ, तपाईले त्यो state उनीहरूको सबैभन्दा नजिकको common ancestor मा "उठाउनु" (move) गर्नुहुन्छ र यसलाई props को माध्यमबाट तलतिर पठाउनुहुन्छ, ताकि त्यहाँ एकै source of truth हुन्छ।

function Parent() {
  const [query, setQuery] = useState(""); // state lives in the common parent
  return (
    <>
      {/* both children share the SAME state */}
      <SearchInput value={query} onChange={setQuery} />
      <Results query={query} />
    </>
  );
}

यदि प्रत्येक child ले आफ्नो query राख्यो भने, तिनीहरू sync बाहिर जान्छन्। यसलाई लिफ्ट गर्नु भनेको input र results सधैँ सहमत हुन्छन्।

नकारात्मक पक्ष: prop drilling

State लाई माथि उठाउनु तपाईलाई धेरै मध्यवर्ती components को माध्यमबाट props पठाउन बाध्य गर्न सक्छ जसले तिनीहरू प्रयोग गर्दैनन्:

<App user={user}>
  <Layout user={user}>      {/* just forwarding */}
    <Sidebar user={user}>   {/* just forwarding */}
      <Avatar user={user} /> {/* finally used here */}

कसरी कम गर्ने

• Composition: JSX लाई children को रूपमा पठाउनुहोस् ताकि data जहाँ प्रयोग गरिन्छ त्यहाँ बस्छ बरु यसलाई thread गरेर।
• Context साँच्चै global data (theme, current user) को लागि।
• एक state library (Zustand/Redux) ठूलो साझा state को लागि।

मार्गदर्शक सिद्धान्त: state लाई केवल जति उच्च गर्न आवश्यक छ त्यति गर। अत्यधिक लिफ्टिङ्ग व्यापक re-renders र prop drilling को कारण बनाउँछ; अन्तर्लिफ्टिङ्ग sync बाहिरको duplicate को कारण बनाउँछ।