{"id":17582,"date":"2025-04-09T00:15:13","date_gmt":"2025-04-08T21:15:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-prop-drillingden-context-api-ve-typescript-ile-kurtulma\/"},"modified":"2025-04-09T00:15:13","modified_gmt":"2025-04-08T21:15:13","slug":"reactte-prop-drillingden-context-api-ve-typescript-ile-kurtulma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-prop-drillingden-context-api-ve-typescript-ile-kurtulma\/","title":{"rendered":"React’te Prop Drilling’den Context API ve TypeScript ile Kurtulma"},"content":{"rendered":"

React’te Prop Drilling’den Context API ve TypeScript ile Kurtulma<\/p>\n

Merhaba! Fatih Soysal olarak, bu yaz\u0131da React uygulamalar\u0131n\u0131zda s\u0131k\u00e7a kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z prop drilling sorununu nas\u0131l \u00e7\u00f6zebilece\u011finizi, Context API ve TypeScript’in g\u00fcc\u00fcnden faydalanarak ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Prop drilling, verilerin bile\u015fen a\u011fac\u0131nda gereksiz yere yukar\u0131dan a\u015fa\u011f\u0131ya aktar\u0131lmas\u0131 anlam\u0131na gelir. Bu durum, kodun okunabilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Neyse ki, Context API bu soruna elegant bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n

Context API Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

React’in Context API’si, verileri uygulama bile\u015fenleri aras\u0131nda payla\u015fmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu sayede, verileri her bir bile\u015fene tek tek prop olarak ge\u00e7irmek zorunda kalmazs\u0131n\u0131z. Context, bir de\u011fer (genellikle bir nesne) sa\u011flar ve bu de\u011feri kullanan bile\u015fenler, bu de\u011fere abone olarak eri\u015fim sa\u011flayabilir. TypeScript’in tipi kontrol mekanizmalar\u0131yla birlikte kullan\u0131ld\u0131\u011f\u0131nda, Context API daha g\u00fcvenilir ve hata ay\u0131klamas\u0131 kolay bir yap\u0131 sunar.<\/p>\n

TypeScript ile G\u00fc\u00e7lendirilmi\u015f Context Olu\u015fturma<\/h2>\n

\u00d6ncelikle, bir Context olu\u015ftural\u0131m. Bu \u00f6rnekte, kullan\u0131c\u0131n\u0131n oturum a\u00e7\u0131p a\u00e7mad\u0131\u011f\u0131n\u0131 ve kullan\u0131c\u0131 ad\u0131n\u0131 tutacak bir context olu\u015fturaca\u011f\u0131z:<\/p>\n

\nimport { createContext, useContext, useState } from 'react';\n\ninterface AuthContextType {\n  isLoggedIn: boolean;\n  username: string | null;\n  login: (username: string) => void;\n  logout: () => void;\n}\n\nconst AuthContext = createContext(null);\n\nexport const AuthProvider = ({ children }: { children: React.ReactNode }) => {\n  const [isLoggedIn, setIsLoggedIn] = useState(false);\n  const [username, setUsername] = useState(null);\n\n  const login = (username: string) => {\n    setIsLoggedIn(true);\n    setUsername(username);\n  };\n\n  const logout = () => {\n    setIsLoggedIn(false);\n    setUsername(null);\n  };\n\n  return (\n    \n      {children}\n    <\/AuthContext.Provider>\n  );\n};\n\nexport const useAuth = () => {\n  const context = useContext(AuthContext);\n  if (context === null) {\n    throw new Error('useAuth hook must be used within an AuthProvider');\n  }\n  return context;\n};\n<\/code><\/pre>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi,  AuthContext<\/code>‘i bir interface ile tan\u0131mlayarak TypeScript’in tip g\u00fcvenli\u011fini sa\u011fl\u0131yoruz.  AuthProvider<\/code>, Context’i sa\u011flayan bile\u015fendir.  useAuth<\/code> hook’u ise, Context de\u011ferine eri\u015fim sa\u011flar.  Bu hook, Context’in mevcut olup olmad\u0131\u011f\u0131n\u0131 kontrol eder ve hata durumunda bir hata f\u0131rlat\u0131r.<\/p>\n
Context’i Uygulamada Kullanma<\/h2>\n
\u015eimdi, Context’i uygulamam\u0131zda nas\u0131l kullanabilece\u011fimize bakal\u0131m.  \u00d6rne\u011fin, bir giri\u015f formu ve kullan\u0131c\u0131 profilini g\u00f6r\u00fcnt\u00fcleyen bir bile\u015fen olu\u015fturabiliriz:<\/p>\n
\nimport React from 'react';\nimport { useAuth } from '.\/AuthContext';\n\nconst LoginForm = () => {\n    const { login } = useAuth();\n    \/\/ Giri\u015f formu burada\n    return