⚡ useContext Nedir?

• React hook’udur, Context API ile birlikte kullanılır.
• Componentler arasında state veya değerleri doğrudan paylaşmak için idealdir.
• Props drilling (props’ları katman katman iletme) sorununu çözer.

⚡ Temel Kullanım

import { createContext, useContext, useState } from "react";

// Context oluşturma
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemeButton />;
}

function ThemeButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  const toggleTheme = () =>
    setTheme(theme === "light" ? "dark" : "light");

  return <button onClick={toggleTheme}>Tema: {theme}</button>;
}

• createContext() → Yeni bir context oluşturur
• Provider → Context değerini sağlar
• useContext(ThemeContext) → Context değerini tüketir

⚡ Notlar

• useContext sadece React function component’leri içinde çalışır.
• Global state veya sık değişmeyen veriler için idealdir.
• Sık değişen state’lerde performans sorunlarına yol açabilir; bu durumda useReducer veya özel state yönetim kütüphaneleri tercih edilir.