Όταν δύο components πρέπει να μοιράζονται την ίδια κατάσταση, μετακινείς ("ανυψώνεις") αυτή την κατάσταση στον πλησιέστερο κοινό πρόγονό τους και την περνάς προς τα κάτω μέσω props, ώστε να υπάρχει μια ενιαία πηγή αλήθειας.
() {
[query, setQuery] = ();
(
);
}
Αν κάθε child component διατηρούσε τη δική του query, θα χάνανε τον συγχρονισμό. Η ανύψωση σημαίνει ότι η είσοδος και τα αποτελέσματα συμφωνούν πάντα.
Η ανύψωση κατάστασης ψηλά μπορεί να σε αναγκάσει να περάσεις props μέσα από πολλά ενδιάμεσα components που δεν τα χρησιμοποιούν:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children ώστε τα δεδομένα να παραμένουν όπου χρησιμοποιούνται αντί να περνούν μέσα από πολλά components.Το καθοδηγητικό αρχή: ανύψωσε την κατάσταση μόνο όσο ψηλά χρειάζεται — όχι ψηλότερα. Υπερβολική ανύψωση προκαλεί ευρεία re-renders και prop drilling· ανεπαρκής ανύψωση προκαλεί μη συγχρονισμένα αντίγραφα.