જ્યારે બે કમ્પોનેન્ટ્સને એક જ સ્ટેટ શેર કરવાની જરૂર હોય, તો તમે તે સ્ટેટને તેમના સૌથી નજીકના સામાન્ય પૂર્વજ સુધી "લિફ્ટ" કરો અને તેને props દ્વારા નીચે પાસ કરો, જેથી એક એકલ સત્યનો સ્ત્રોત હોય.
jsx
() {
[query, setQuery] = ();
(
);
}
જ્યારે બે કમ્પોનેન્ટ્સને એક જ સ્ટેટ શેર કરવાની જરૂર હોય, તો તમે તે સ્ટેટને તેમના સૌથી નજીકના સામાન્ય પૂર્વજ સુધી "લિફ્ટ" કરો અને તેને props દ્વારા નીચે પાસ કરો, જેથી એક એકલ સત્યનો સ્ત્રોત હોય.
() {
[query, setQuery] = ();
(
);
}
જો દરેક child તેનો પોતાનો query રાખતો, તો તેઓ sync થી બહાર આવી જાત। સ્ટેટ લિફ્ટ કરવાનો અર્થ એ છે કે input અને results હંમેશા સહમત હોય.
સ્ટેટ ઉંચું લિફ્ટ કરવાથી તમને મધ્યવર્તી કમ્પોનેન્ટ્સ દ્વારા props પાસ કરવાની ફરજ પણે શકે છે જે તેનો ઉપયોગ કરતા નથી:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
માર્ગદર્શક સિદ્ધાંત: સ્ટેટ ફક્ત તેટલું લિફ્ટ કરો જેટલો જરૂરી હોય — વધુ ન કરો. વધુ લિફ્ટ કરવું વ્યાપક re-renders અને prop drilling નું કારણ બને છે; ઓછું લિફ્ટ કરવું sync થી બહારના નકલોનું કારણ બને છે.
વિગતવાર જવાબો સાથે IT ઇન્ટરવ્યૂ પ્રશ્નોની લાઇબ્રેરી — જુનિયરથી સિનિયર સુધી.
દાન કરો