Το Context σας επιτρέπει να μοιραστείτε μια τιμή με ολόκληρο ένα υποδέντρο χωρίς να περάσετε props σε κάθε επίπεδο (prop drilling). Δημιουργείτε ένα context, περιβάλλετε ένα υποδέντρο στο Provider του, και οποιοδήποτε απόγονο το διαβάζει με useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Δεδομένα χαμηλής συχνότητας, "παγκόσμια-ish" που χρειάζονται πολλά συστατικά: theme, current user, locale, feature flags.
Όταν αλλάζει η value του Provider, κάθε συστατικό που καταναλώνει το context επανα-renderάρεται — δεν υπάρχει τρόπος να εγγραφείτε μόνο σε ένα μέρος του. Δύο πρακτικές συνέπειες:
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
Για συχνά αλλαζόμενη ή μεγάλη state, χωρίστε το context σε μικρότερα κομμάτια, ή χρησιμοποιήστε ένα store (Zustand/Redux) που υποστηρίζει επιλεκτικές συνδρομές. Το Context είναι ένα εργαλείο dependency-injection, όχι ένας πλήρης state manager.