Τι σημαίνει η ανύψωση state;

Question

Accepted Answer

**Ανύψωση state** σημαίνει μετακίνηση του state από ένα child component σε ένα **κοινό parent** ώστε πολλαπλά children να μπορούν να μοιράζονται και να παραμένουν συγχρονισμένα με τα ίδια δεδομένα. Είναι η κανονική λύση όταν τα sibling components πρέπει να συντονιστούν. ## Το πρόβλημα: τα siblings χρειάζονται κοινά δεδομένα ```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 ``` Αν δύο sibling components κρατούν το δικό τους αντίγραφο σχετικού state, δεν υπάρχει τρόπος να παραμείνουν συνεπή — η αλλαγή του ενός δεν επηρεάζει το άλλο. ## Η λύση: ανύψωση του state στο parent ```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)} />; } ``` Το κοινό state ζει τώρα στο parent (`Calculator`). Το περνάει *κάτω* ως prop και ένα setter ώστε τα children να μπορούν να ζητήσουν αλλαγές (*πάνω*). Τώρα και οι δύο είσοδοι αντικατοπτρίζουν την ίδια πηγή — η επεξεργασία ενός ενημερώνει και τα δύο. ## Το pattern ```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) ``` Αυτή είναι η ίδια ροή "data down, events up", εφαρμοσμένη για να γίνει το state κοινό. ## Όταν η ανύψωση γίνεται πολύ μεγάλη ```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. ``` ## Γιατί έχει σημασία Η ανύψωση state είναι η θεμελιώδης τεχνική για **κοινοχρησία state μεταξύ sibling/σχετικών components** σε component-based frameworks — διατηρεί μια ενιαία πηγή αλήθειας σε ένα κοινό parent ώστε τα children να παραμένουν συγχρονισμένα. Είναι συχνά το *πρώτο* εργαλείο στο οποίο προσφεύγουν πριν προσθέσουν Context ή ένα store. Το να αναγνωρίσετε πότε πρέπει να ανυψώσετε (τα siblings πρέπει να συντονιστούν) — και πότε η ανύψωση έχει πάει πολύ μακριά (προκαλώντας prop drilling, οπότε ήρθε η ώρα για Context/ένα store) — είναι ζωτικής σημασίας για τη σωστή δόμηση του component state.