useContext nedir? Ne zaman kullanılır, dezavantajı nedir?

Context, bir değeri bileşen ağacında prop drilling yapmadan derinlere iletmeyi sağlar. Tema, oturum açmış kullanıcı, dil gibi uygulama genelindeki veriler için uygundur.

const TemaContext = createContext("acik");

function App() {
  const [tema, setTema] = useState("acik");
  return (
    <TemaContext.Provider value={{ tema, setTema }}>
      <Sayfa />
    </TemaContext.Provider>
  );
}

function Buton() {
  const { tema } = useContext(TemaContext);
  return <button className={tema}>Kaydet</button>;
}

Dezavantajı: Provider'ın value'su değiştiğinde o context'i kullanan tüm bileşenler yeniden render olur. Sık değişen verileri (ör. form değerleri) context'e koymak performansı düşürür. Çözüm: context'leri bölmek, value'yu useMemo ile sabitlemek veya Zustand gibi seçici abonelik sunan bir kütüphane kullanmak.