Context ne zaman iyi bir durum çözümü ve ne zaman değildir?

Question

Accepted Answer

React'ın **Context API**, tüm bir bileşen alt ağacı ile prop drilling olmadan bir değer paylaşmanıza izin verir. **Düşük-frekans, yaygın olarak paylaşılan** veriler için harika — ancak bu *tam* bir durum-yönetimi çözümü değildir ve sıkça değişen durum için bir re-render tuzağına sahiptir. ## Context'in parlak olduğu zamanlar ```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 ``` ## Tuzak: HER değişiklikte her tüketici re-render edilir ```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 değeri değiştiğinde, bu context'i kullanan **tüm** bileşenler re-render edilir — değişen kısmı kullanıp kullanmadıklarına bakılmaksızın. Sık güncellenen durum için bu, performans sorunlarına neden olur. Context'in yerleşik seçici abonelik yoktur. ## Azaltmalar ve alternatif ```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 ``` Durum kütüphaneleri (Zustand, Redux, Jotai) re-render sorununu **seçici abonelikler** ile çözer — bileşenler yalnızca kullandıkları dilimler için abone olur ve yalnızca bunlar değiştiğinde re-render edilir: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context bir durum yöneticisi değildir ```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. ``` ## Neden önemli Context'in en iyi noktasını — ve sınırlamalarını — bilmek iki yaygın hatayı önler: Context'te olması gereken şeyleri prop-drilling yapmak ve yüksek-frekans durumunu Context'e koymak (uygulamanın tamamında re-render'lara neden olur). Kural: **Nadiren değişen, yaygın olarak paylaşılan** değerler (tema, kullanıcı, yerel ayar) için Context; **sıkça değişen veya büyük** paylaşılan durum için seçici abonelikli özel bir depo. Context'in durumu dağıttığını ancak yönetmediğini anlamak, ne zaman yeterli olduğunu ve ne zaman daha fazlasına ihtiyaç duyduğunuzu açıklar.