நிலையை மேல்நோக்கி উত்থাபிக்கிறது என்றால் என்ன?

Question

Accepted Answer

**நிலையை மேல்நோக்கி உத்தாபனை** ஒரு சிறுவயதாக இருக்கும் கூறுபுள்ளியாக நிலையை **பொதுவான பெற்றோர்**ஆக மாற்றுவதாகும் இதனால் பல சிறுவயதாக இருக்கும் கூறுபுள்ளிகள் இதே தரவை பகிர்ந்துகொண்டு ஒத்திசைந்து இருக்கலாம். இது சகோதர சகோதரி கூறுபுள்ளிகளுக்கு ஒன்றிணையும் போது தேவைப்படும் பொதுவான தீர்வுவாக உள்ளது. ## சிக்கல்: சகோதர சகோதரிகளுக்கு பகிரப்பட்ட தரவு தேவை ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` இரண்டு சகோதர சகோதரி கூறுபுள்ளிகளும் தங்களுடைய சொந்த நிலைக்கு சம்பந்தமான தகவல்களை வைத்திருந்தால், அவற்றை நிலையாக வைத்திருப்பதற்கு எந்த வழিமுறையும் இல்லை — ஒன்றை மாற்றுவது மற்றது பாதிக்கப்படாது. ## தீர்வு: நிலையை பெற்றோர்ஆக மேல்நோக்கி உத்தாபனை செய்யுங்கள் ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` பகிரப்பட்ட நிலை இப்போது பெற்றோர்ஆக (`Calculator`) வசிக்கிறது. இது மதிப்பை *கீழ்நோக்கி* ஒரு prop மற்றும் setter ஆக அனுப்புகிறது இதனால் சிறுவயதாக இருக்கும் கூறுபுள்ளிகள் மாற்றங்களுக்கு கோரிக்கை வைக்க முடியும் (*மேல்நோக்கி*). இப்போது இரண்டு உள்ளீடு புலங்களும் ஒரே மூலமான தகவலை பிரதிபலிக்கின்றன — ஒன்றை திருத்துவது இரண்டையும் புதுப்பிக்கிறது. ## வடிவம் ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` இதனதே "தரவு கீழ்நோக்கி, நிகழ்வுகள் மேல்நோக்கி" பாய்வு, நிலையை பகிரப்பட்டதாக செய்ய பயன்படுத்தப்பட்டுள்ளது. ## நிலையை உத்தாபிக்கிறது அதிகமாக மாறும் போது ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## இது ஏன் முக்கியமாக உள்ளது நிலையை மேல்நோக்கி உத்தாபிக்கிறது என்பது **சகோதர/சம்பந்தப்பட்ட கூறுபுள்ளிகளுக்கு இடையே நிலை பகிரப்பட்டதாக** செய்ய பயன்படுத்தப்படும் அடிப்படை முறை கூறுபுள்ளி-அடிப்படை கাঠামোতে — இது ஒரு பொதுவான பெற்றோரிலுள்ள உண்மையின் ஒரே மூலமாக வைக்கிறது இதனால் சிறுவயதாக இருக்கும் கூறுபுள்ளிகள் ஒத்திசைந்து இருக்கின்றன. ஏனைய Context அல்லது store சேர்க்க முன்னர் இது பெரும்பாலும் *முதல்* கருவியை பயன்படுத்த வேண்டும். எப்போது உத்தாபிக்க வேண்டும் என்பதை அறிந்துகொள்ளுதல் (சகோதர சகோதரிகளுக்கு ஒன்றிணையும் தேவை) — மற்றும் எப்போது உத்தாபனை அதிக அளவுக்கு சென்றுவிட்டது (prop drilling உணர்விக்க, கூடியவளவு Context/store பயன்படுத்த தேவை) — இதுவாகும் கூறுபுள்ளி நிலையை சரியாக அமைக்க முக்கியமாக உள்ளது।