useContext: ουσία, hook πρόσβασης στο περιβάλλον και πάροχοι στο React

Τι είναι το useContext στο React

useContext — είναι ένα hook που προστέθηκε στο React 16.8 μαζί με τα υπόλοιπα hooks, το οποίο επιτρέπει την ανάγνωση μιας τιμής από το context του React. Το context είναι ένας μηχανισμός ενσωματωμένος στο React, σχεδιασμένος για τη μεταβίβαση δεδομένων μέσα στο δέντρο components χωρίς την ανάγκη χειροκίνητης μεταβίβασης props σε κάθε επίπεδο. Το useContext αντικαθιστά το component Consumer από το παλιό Context API και κάνει τον κώδικα πιο συνοπτικό και ευανάγνωστο.

Τυπικά σενάρια χρήσης του context περιλαμβάνουν θέματα εμφάνισης (ανοιχτό/σκοτεινό), τοπικές ρυθμίσεις και μεταφράσεις (i18n), έλεγχο ταυτότητας χρήστη, ρυθμίσεις εφαρμογής και οποιαδήποτε άλλα καθολικά δεδομένα που χρειάζονται πολλά components σε διαφορετικά επίπεδα εμφώλευσης. Η ομάδα του React συνιστά τη χρήση context για δεδομένα που είναι καθολικά για ένα υποδέντρο components, αλλά όχι για ολόκληρη την εφαρμογή.

Σύμφωνα με τα δεδομένα του React Team — Context documentation (2025), η λανθασμένη χρήση του context είναι μία από τις κύριες αιτίες προβλημάτων απόδοσης σε εφαρμογές React. Κάθε αλλαγή τιμής στον Provider προκαλεί re-render όλων των καταναλωτών, ανεξάρτητα από το ποιο μέρος των δεδομένων άλλαξε. Η βελτιστοποίηση μέσω useMemo και ο διαχωρισμός contexts λύνει αυτό το πρόβλημα.

import { createContext, useContext } from 'react';

// Δημιουργία περιβάλλοντος με προεπιλεγμένη τιμή
const ThemeContext = createContext('φως');

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button className={`btn-${theme}`}>Click</button>;
}

Πώς λειτουργεί το context στο React

Ο μηχανισμός του context στο React υλοποιείται μέσω του προτύπου Provider-Consumer. Το createContext επιστρέφει ένα αντικείμενο με δύο οντότητες: Provider — component που μεταδίδει την τιμή, και το ίδιο το αντικείμενο context, το οποίο χρησιμοποιείται στο useContext. Ο Provider τοποθετείται στο δέντρο components και μεταδίδει την τιμή σε όλα τα θυγατρικά στοιχεία ανεξάρτητα από το βάθος εμφώλευσης.

Όταν το React συναντά μια κλήση useContext, ανεβαίνει στο fiber-δέντρο αναζητώντας τον πλησιέστερο Provider για αυτό το context. Αν βρεθεί Provider, επιστρέφεται η τιμή του. Αν δεν βρεθεί Provider, επιστρέφεται η προεπιλεγμένη τιμή που δόθηκε στο createContext. Αυτή η αναζήτηση γίνεται σε κάθε render, αλλά χάρη στη μνημοποίηση fiber-κόμβων είναι πολύ γρήγορη και δεν επηρεάζει την απόδοση.

Σύμφωνα με το React — Context internals (2024), η εσωτερική υλοποίηση του useContext χρησιμοποιεί μια συνδεδεμένη λίστα hooks, παρόμοια με το useState. Κάθε hook αποθηκεύει μια αναφορά στον fiber-κόμβο, επιτρέποντας στο React να καθορίσει γρήγορα ποιος Provider αντιστοιχεί στο συγκεκριμένο context. Αν ο Provider ενημερώσει την τιμή, το React σημειώνει όλους τους fiber-κόμβους που χρησιμοποιούν αυτό το context για re-render.

Provider και εμφωλευμένα contexts

Τα components Provider μπορούν να εμφωλευτούν το ένα μέσα στο άλλο, δημιουργώντας μια ιεραρχία contexts. Κάθε θυγατρικός Provider παρακάμπτει την τιμή του γονικού για το υποδέντρο του. Αυτό είναι χρήσιμο όταν σε μία οθόνη χρειάζεται ανοιχτό θέμα, ενώ σε ένα εμφωλευμένο modal χρειάζεται σκοτεινό θέμα. Το useContext επιστρέφει πάντα την τιμή του πλησιέστερου Provider προς τα πάνω στο δέντρο.

const UserContext = createContext(null);
const ThemeContext = createContext('φως');

function App() {
    return (
        <UserContext.Provider value={{ name: 'Alice' }}>
            <ThemeContext.Provider value='dark'>
                <Profile />
            </ThemeContext.Provider>
        </UserContext.Provider>
    );
}

Δημιουργία provider με createContext

Η συνάρτηση createContext(defaultValue) δημιουργεί ένα αντικείμενο context. Η παράμετρος defaultValue χρησιμοποιείται όταν ένα component καλεί το useContext αλλά δεν υπάρχει αντίστοιχος Provider ψηλότερα στο δέντρο. Χωρίς defaultValue, το useContext θα επιστρέψει undefined, το οποίο μπορεί να οδηγήσει σε απροσδόκητα σφάλματα. Συνιστάται να μεταβιβάζεται πάντα μια ουσιαστική προεπιλεγμένη τιμή ή null.

Η δημιουργία ενός προσαρμοσμένου provider είναι ένα συνηθισμένο πρότυπο για την ενθυλάκωση της λογικής του context. Μέσα σε έναν τέτοιο provider αποθηκεύεται η κατάσταση (μέσω useState ή useReducer) και παρέχεται μέσω του value prop του Provider. Αυτό επιτρέπει την απόκρυψη λεπτομερειών υλοποίησης από τα components-καταναλωτές και τη συγκέντρωση της λογικής διαχείρισης του context σε ένα σημείο.

// Προσαρμοσμένος πάροχος με διαχείριση κατάστασης
const AuthContext = createContext(null);

function AuthProvider({ children }) {
    const [user, setUser] = useState(null);

    const login = useCallback(async (email, pass) => {
        const u = await loginApi(email, pass);
        setUser(u);
    }, []);

    return (
        <AuthContext.Provider value={{ user, login }}>
            {children}
        </AuthContext.Provider>
    );
}

Χρήση του useContext σε θυγατρικά components

Στα functional components, το useContext είναι ο μοναδικός τρόπος πρόσβασης στο context. Αντικαθιστά το component Consumer από το παλιό Context API, το οποίο απαιτούσε το πρότυπο render-prop: <ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>. Το useContext κάνει τον κώδικα πιο γραμμικό και ευανάγνωστο, ειδικά όταν εργάζεστε με πολλά contexts σε ένα component.

Όταν χρησιμοποιείτε πολλά contexts σε ένα component, απλώς καλέστε το useContext πολλές φορές για κάθε context. Κάθε κλήση επιστρέφει την τιμή του αντίστοιχου Provider. Η σειρά των κλήσεων δεν έχει σημασία, καθώς κάθε context είναι μια ανεξάρτητη οντότητα. Το React βελτιστοποιεί πολλαπλές κλήσεις μέσω του ίδιου συστήματος fiber-αναφορών.

function Dashboard() {
    const { user } = useContext(AuthContext);
    const theme = useContext(ThemeContext);
    const { locale } = useContext(I18nContext);

    return (
        <div className={`dashboard-${theme}`}>
            <h1>{locale.greeting}, {user.name}</h1>
        </div>
    );
}

useContext vs Redux: πότε να επιλέξεις τι

Η επιλογή μεταξύ useContext και Redux εξαρτάται από την κλίμακα και την πολυπλοκότητα της διαχείρισης κατάστασης. Το useContext + useReducer είναι μια ελαφριά εναλλακτική του Redux για μικρές και μεσαίες εφαρμογές. Δεν απαιτεί εγκατάσταση εξωτερικής βιβλιοθήκης, είναι πιο εύκολο στην εκμάθηση και επαρκεί για τις περισσότερες εργασίες. Το Redux δικαιολογείται όταν απαιτείται αυστηρή αρχιτεκτονική με middleware, devtools και immutable ενημερώσεις.

Το κύριο πλεονέκτημα του Redux έναντι του useContext είναι η βελτιστοποίηση re-renders. Από προεπιλογή, όταν αλλάξει η τιμή στον Provider, όλοι οι καταναλωτές του context ανασχεδιάζονται. Το Redux με useSelector και shallowEqual επιτρέπει στα components να εγγράφονται μόνο σε συγκεκριμένα μέρη της κατάστασης, το οποίο μειώνει σημαντικά τον αριθμό των re-renders σε μεγάλες εφαρμογές. Το context μπορεί επίσης να βελτιστοποιηθεί μέσω διαχωρισμού σε πολλά μικρά contexts.

Σύμφωνα με τους Redux maintainers — When to use Redux (2024), το 70% των εφαρμογών React δεν χρειάζονται Redux. Αν έχεις λιγότερα από 50 components και η κατάσταση δεν έχει πολύπλοκη λογική με caching, debounce και side-effects — το useContext + useReducer είναι υπεραρκετό. Το Redux προσθέτει boilerplate και πρέπει να χρησιμοποιείται συνειδητά.

Συνηθισμένα λάθη με το useContext

Το πιο συνηθισμένο λάθος είναι η αναδημιουργία του value-αντικειμένου σε κάθε render του Provider. Αν μεταβιβάζεις στον Provider value={{ user, login }}, τότε σε κάθε render του Provider δημιουργείται ένα νέο αντικείμενο, το οποίο προκαλεί re-render όλων των καταναλωτών, ακόμα κι αν τα δεδομένα δεν άλλαξαν. Η λύση — κάνε memoization του value μέσω useMemo ή χρησιμοποίησε ξεχωριστά contexts για δεδομένα που αλλάζουν συχνά και σπάνια.

• Περιττοί re-renders — νέο αντικείμενο value σε κάθε render του Provider. Χρησιμοποίησε useMemo για memoization του value.
• Πολύ μεγάλο context — ένας Provider με δεκάδες πεδία αναγκάζει όλα τα θυγατρικά components να ανασχεδιάζονται όταν αλλάζει οποιοδήποτε πεδίο. Χώρισε σε πολλά contexts ανά λογική ομάδα.
• Απουσία defaultValue — αν δεν βρεθεί Provider, το useContext επιστρέφει defaultValue, και αν αυτό είναι undefined — κάθε κλήση θα αποτύχει με TypeError.
• Εμφωλευμένοι Provider ίδιου τύπου — η παράκαμψη του context σε βαθύτερα επίπεδα μπορεί να προκαλέσει σύγχυση και να οδηγήσει σε απροσδόκητες τιμές.

// ❌ Νέο αντικείμενο σε κάθε render — όλοι οι καταναλωτές κάνουν re-render
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ Τιμή με memoization — re-render μόνο όταν αλλάζει ο user ή το login
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

Για να λύσεις το πρόβλημα του “μεγάλου context”, χώρισε την καθολική κατάσταση σε λογικές ομάδες: AuthContext, ThemeContext, I18nContext. Κάθε context είναι υπεύθυνο για τον τομέα του και ενημερώνεται ανεξάρτητα. Αυτό είναι απλούστερο από το να προσπαθείς να βελτιστοποιήσεις ένα γιγαντιαίο context μέσω useMemo και δίνει πιο προβλέψιμη συμπεριφορά re-renders.