🔑 Temel Amaç

• Prop drilling’i önlemek: Derin bileşen ağacına prop geçirmeden global veri paylaşımı sağlar.
• Provider: Veriyi sağlayan üst bileşen. Genellikle uygulamanın en üstünde yer alır.
• Consumer / useContext: Provider’dan veri alan alt bileşenler. Provider dışında useContext kullanılırsa undefined döner.

⚡ Veri Akışı

• Provider, value prop’u ile veri sağlar.
• Consumer’lar (veya useContext) bu veriye erişir ve yalnızca bu bileşenler yeniden render edilir.
• Context’i kullanmayan ara bileşenler yeniden render edilmez → performans avantajı.

🛠 Context + Custom Hook Örneği

UserContext.js

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

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState({ name: 'Talha', isLoggedIn: true });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  const context = useContext(UserContext);
  if (!context) throw new Error('useUser must be used within a UserProvider');
  return context;
}

App.js

import { UserProvider } from './UserContext';
import Profile from './Profile';

function App() {
  return (
    <UserProvider>
      <Profile />
    </UserProvider>
  );
}

Profile.js

import { useUser } from './UserContext';

function Profile() {
  const { user, setUser } = useUser();
  return <div>Hoşgeldin, {user.name}</div>;
}

🔹 Ek Örnek: PostContext

const PostContext = createContext();

export function PostProvider({ children }) {
  const [posts, setPosts] = useState([]);

  const onAddPost = (post) => setPosts([...posts, post]);
  const onClearPosts = () => setPosts([]);

  return (
    <PostContext.Provider value={{ posts, onAddPost, onClearPosts }}>
      {children}
    </PostContext.Provider>
  );
}

// Kullanım
const { onClearPosts } = useContext(PostContext);