Πότε το Context είναι μια καλή λύση state και πότε όχι;

Question

Accepted Answer

Το **Context API** του React σας επιτρέπει να μοιράσετε μια τιμή με ένα ολόκληρο subtree συστατικού χωρίς prop drilling. Είναι υπέροχο για **χαμηλή συχνότητα, ευρέως κοινόχρηστα** δεδομένα — αλλά δεν είναι *μια* πλήρης λύση διαχείρισης state και έχει ένα πρόβλημα επανα-rendering για συχνά μεταβαλλόμενο state. ## Πότε το Context λάμπει ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* any descendant can read theme — no prop drilling */} ); } ``` ```text Good fits (data that's read widely but changes rarely): ✓ Theme (dark/light) ✓ Current user / auth ✓ Locale / i18n ✓ App-wide config or feature flags ``` ## Το πρόβλημα: κάθε καταναλωτής επανα-renders σε ΟΠΟΙΑΔΗΠΟΤΕ αλλαγή ```jsx // ❌ a context value that changes often re-renders ALL consumers const AppContext = createContext(); // value = { user, cart, notifications, ...everything } // → updating ONE field re-renders EVERY component using the context ``` Όταν αλλάζει η τιμή του context, **όλα** τα συστατικά που καταναλώνουν αυτό το context επανα-render — ανεξάρτητα από το αν χρησιμοποιούν το μέρος που άλλαξε. Για συχνά ενημερωμένο state, αυτό προκαλεί προβλήματα απόδοσης. Το Context δεν έχει ενσωματωμένη επιλεκτική συνδρομή. ## Μετριασμοί και η εναλλακτική λύση ```text ✓ Split into multiple focused contexts (ThemeContext, UserContext separately) ✓ Memoize the value object (useMemo) so it doesn't change identity needlessly ✗ But for high-frequency or large shared state → use a real store ``` Οι βιβλιοθήκες state (Zustand, Redux, Jotai) επιλύουν το πρόβλημα επανα-rendering με **επιλεκτικές συνδρομές** — τα συστατικά συνδρέουν μόνο στα slices που χρησιμοποιούν και επανα-render μόνο όταν αυτά αλλάζουν: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Το Context δεν είναι ένας διαχειριστής state ```text Context = a TRANSPORT mechanism (passes a value down), NOT state management itself. You still need useState/useReducer to hold the state; Context just distributes it. ``` ## Γιατί έχει σημασία Η γνώση του σημείου δύναμης του Context — και των περιορισμών του — αποτρέπει δύο συνηθισμένα λάθη: prop-drilling πράγματα που θα έπρεπε να είναι στο Context, και τοποθέτηση υψηλής συχνότητας state στο Context (προκαλώντας επανα-renders σε ολόκληρη την εφαρμογή). Ο κανόνας: Context για **σπάνια μεταβαλλόμενες, ευρέως κοινόχρηστες** τιμές (theme, user, locale); ένα ειδικό store με επιλεκτικές συνδρομές για **συχνά μεταβαλλόμενο ή μεγάλο** κοινόχρηστο state. Η κατανόηση ότι το Context διανέμει state αλλά δεν το διαχειρίζεται διευκρινίζει πότε είναι αρκετό και πότε χρειάζεστε περισσότερα.