{"id":35965,"date":"2025-12-06T06:40:40","date_gmt":"2025-12-06T03:40:40","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35965"},"modified":"2025-12-06T06:40:40","modified_gmt":"2025-12-06T03:40:40","slug":"reactte-atomik-setstate-guncellemeleri-kapsamli-bir-inceleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-atomik-setstate-guncellemeleri-kapsamli-bir-inceleme\/","title":{"rendered":"React’te Atomik SetState G\u00fcncellemeleri: Kapsaml\u0131 Bir \u0130nceleme"},"content":{"rendered":"

<\/p>\n

React’te Atomik SetState G\u00fcncellemeleri: Kapsaml\u0131 Bir \u0130nceleme<\/h2>\n

React uygulamalar\u0131, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) dinamik olarak y\u00f6netmek i\u00e7in durum (state) kavram\u0131n\u0131 merkezine al\u0131r. Bir bile\u015fenin durumu de\u011fi\u015fti\u011finde, React bu de\u011fi\u015fikli\u011fi alg\u0131lar ve UI’y\u0131 g\u00fcncelleyerek yeni durumu yans\u0131t\u0131r. Bu durum g\u00fcncellemelerini tetikleyen mekanizma, s\u0131n\u0131f bile\u015fenlerinde setState<\/code>, fonksiyonel bile\u015fenlerde ise useState<\/code> ve useReducer<\/code> hook’lar\u0131d\u0131r. Ancak, bu g\u00fcncellemelerin sadece bir de\u011feri de\u011fi\u015ftirmekten ibaret olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda uygulaman\u0131n tutarl\u0131l\u0131\u011f\u0131n\u0131 ve performans\u0131n\u0131 do\u011frudan etkileyen karma\u015f\u0131k bir s\u00fcre\u00e7 oldu\u011funu anlamak kritik \u00f6neme sahiptir. “Atomik setState g\u00fcncellemeleri” kavram\u0131, durum de\u011fi\u015fikliklerinin izole, b\u00fct\u00fcn ve beklenmedik etkile\u015fimlere yol a\u00e7madan ger\u00e7ekle\u015fmesini ifade eder. Bu makalede, React’in durum g\u00fcncelleme mekanizmalar\u0131n\u0131 derinlemesine inceleyecek, atomik olmayan g\u00fcncellemelerin yol a\u00e7abilece\u011fi sorunlar\u0131 ele alacak ve React’in bu sorunlar\u0131 nas\u0131l \u00e7\u00f6zd\u00fc\u011f\u00fcn\u00fc, geli\u015ftiricilerin atomik g\u00fcncellemeleri nas\u0131l sa\u011flayabilece\u011fini detayl\u0131 bir \u015fekilde a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n

React’in Durum Y\u00f6netiminin Temelleri<\/h3>\n

React’te durum y\u00f6netimi, bile\u015fenlerin kendi i\u00e7 verilerini saklamas\u0131na ve bu veriler de\u011fi\u015fti\u011finde UI’y\u0131 yeniden render etmesine olanak tan\u0131r. Bu, etkile\u015fimli ve dinamik kullan\u0131c\u0131 deneyimleri olu\u015fturman\u0131n temelidir.<\/p>\n

setState<\/code> ve useState<\/code>‘in \u00d6z\u00fc<\/h4>\n

S\u0131n\u0131f bile\u015fenlerinde durum g\u00fcncellemeleri this.setState()<\/code> metodu arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r. Bu metodun iki ana formu vard\u0131r:
\n1. Nesne Formu:<\/strong> this.setState({ key: value })<\/code>. Bu form, genellikle g\u00fcncelleme yeni durumun \u00f6nceki durumdan ba\u011f\u0131ms\u0131z oldu\u011fu durumlarda kullan\u0131l\u0131r.
\n2. Fonksiyon Formu (Updater Function):<\/strong> this.setState((prevState, props) => ({ key: newValue }))<\/code>. Bu form, g\u00fcncelleme \u00f6nceki duruma ba\u011fl\u0131 oldu\u011funda tercih edilir ve atomik g\u00fcncellemeler i\u00e7in kritik \u00f6neme sahiptir. React, bu fonksiyonu \u00e7a\u011f\u0131r\u0131rken her zaman en g\u00fcncel prevState<\/code> de\u011ferini sa\u011flar.<\/p>\n

Fonksiyonel bile\u015fenlerde ise useState<\/code> hook’u kullan\u0131l\u0131r:
\nconst [state, setState] = useState(initialState);<\/code>
\nBuradaki setState<\/code> fonksiyonu da benzer \u015fekilde iki formda kullan\u0131labilir:
\n1. De\u011fer Formu:<\/strong> setState(newValue)<\/code>.
\n2. Fonksiyon Formu (Updater Function):<\/strong> setState(prevValue => prevValue + 1)<\/code>. T\u0131pk\u0131 s\u0131n\u0131f bile\u015fenlerindeki gibi, bu form da \u00f6nceki duruma dayal\u0131 g\u00fcncellemeler i\u00e7in atomikli\u011fi garanti eder.<\/p>\n

Her iki durumda da, setState<\/code> \u00e7a\u011fr\u0131lar\u0131n\u0131n e\u015fzamans\u0131z<\/strong> oldu\u011funu unutmamak \u00f6nemlidir. Bu, bir setState<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131n hemen ard\u0131ndan durumun g\u00fcncellenmeyece\u011fi, bunun yerine React’in dahili bir zamanlay\u0131c\u0131 veya toplu i\u015fleme (batching) mekanizmas\u0131 taraf\u0131ndan i\u015flenece\u011fi anlam\u0131na gelir. Bu e\u015fzamans\u0131z do\u011fa, atomik olmayan g\u00fcncellemelerin temel nedenlerinden biridir.<\/p>\n

Toplu \u0130\u015fleme (Batching)<\/h4>\n

React’in performans optimizasyonlar\u0131ndan biri de toplu i\u015fleme (batching) mekanizmas\u0131d\u0131r. Varsay\u0131lan olarak, bir olay i\u015fleyici (event handler) i\u00e7indeki birden fazla setState<\/code> \u00e7a\u011fr\u0131s\u0131 tek bir yeniden render i\u015flemiyle birle\u015ftirilir. \u00d6rne\u011fin:<\/p>\n

handleClick = () => {\n  this.setState({ count: this.state.count + 1 });\n  this.setState({ isActive: !this.state.isActive });\n  \/\/ React, bu iki setState \u00e7a\u011fr\u0131s\u0131n\u0131 tek bir render i\u015flemiyle birle\u015ftirir.\n}<\/code><\/pre>\n
Bu, gereksiz yeniden render’lar\u0131 \u00f6nleyerek performans\u0131 art\u0131r\u0131r. React 18’den \u00f6nce, toplu i\u015fleme yaln\u0131zca taray\u0131c\u0131 olaylar\u0131 veya React olaylar\u0131 i\u00e7inde ger\u00e7ekle\u015fiyordu. Promise’ler, setTimeout<\/code> veya di\u011fer e\u015fzamans\u0131z kod bloklar\u0131 i\u00e7indeki setState<\/code> \u00e7a\u011fr\u0131lar\u0131 ayr\u0131 ayr\u0131 render’lara neden olabiliyordu. Ancak React 18 ile birlikte otomatik toplu i\u015fleme<\/strong> (automatic batching) \u00f6zelli\u011fi geldi. Bu, React’in t\u00fcm setState<\/code> \u00e7a\u011fr\u0131lar\u0131n\u0131 (nereden tetiklendi\u011fine bak\u0131lmaks\u0131z\u0131n) m\u00fcmk\u00fcn oldu\u011funca tek bir render i\u015flemi alt\u0131nda birle\u015ftirmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131 anlam\u0131na gelir. Bu \u00f6nemli de\u011fi\u015fiklik, atomik g\u00fcncellemelerin sa\u011flanmas\u0131n\u0131 daha da kolayla\u015ft\u0131rm\u0131\u015ft\u0131r.<\/p>\n
De\u011fi\u015fmezlik (Immutability) \u0130lkesi<\/h4>\n
React’te durum g\u00fcncellemeleri yaparken de\u011fi\u015fmezlik ilkesine uymak hayati \u00f6neme sahiptir. Durum nesnelerini veya dizilerini do\u011frudan de\u011fi\u015ftirmek yerine, her zaman yeni bir kopya olu\u015fturup bu kopya \u00fczerinde de\u011fi\u015fiklikler yapmal\u0131y\u0131z.<\/p>\n
Yanl\u0131\u015f yakla\u015f\u0131m (mutable):<\/p>\n
\/\/ S\u0131n\u0131f bile\u015feni\nthis.state.user.age = 30; \/\/ DO\u011eRU DE\u011e\u0130L!\nthis.setState({ user: this.state.user }); \/\/ React de\u011fi\u015fikli\u011fi alg\u0131lamayabilir.\n\n\/\/ Fonksiyonel bile\u015fen\nconst [user, setUser] = useState({ name: 'Alice', age: 25 });\nuser.age = 30; \/\/ DO\u011eRU DE\u011e\u0130L!\nsetUser(user); \/\/ React de\u011fi\u015fikli\u011fi alg\u0131lamayabilir.<\/code><\/pre>\n
Do\u011fru yakla\u015f\u0131m (immutable):<\/p>\n
\/\/ S\u0131n\u0131f bile\u015feni\nthis.setState(prevState => ({\n  user: {\n    ...prevState.user,\n    age: 30\n  }\n}));\n\n\/\/ Fonksiyonel bile\u015fen\nconst [user, setUser] = useState({ name: 'Alice', age: 25 });\nsetUser(prevUser => ({\n  ...prevUser,\n  age: 30\n}));<\/code><\/pre>\n
De\u011fi\u015fmezlik, React’in dahili optimizasyonlar\u0131n\u0131n (\u00f6rne\u011fin, PureComponent<\/code>, React.memo<\/code> ve Fiber mimarisindeki kar\u015f\u0131la\u015ft\u0131rma algoritmalar\u0131) do\u011fru \u00e7al\u0131\u015fmas\u0131 i\u00e7in temeldir. React, durum nesnelerinin referanslar\u0131n\u0131 kar\u015f\u0131la\u015ft\u0131rarak de\u011fi\u015fiklikleri alg\u0131lar. E\u011fer nesnenin kendisi de\u011fi\u015fmeden i\u00e7indeki bir \u00f6zellik de\u011fi\u015firse, React bu de\u011fi\u015fikli\u011fi fark etmeyebilir ve UI g\u00fcncellenmeyebilir. De\u011fi\u015fmezlik, her zaman yeni bir referans sa\u011flayarak bu sorunu \u00f6nler ve atomik g\u00fcncellemelerin temel bir par\u00e7as\u0131d\u0131r.<\/p>\n
Atomik Olmayan G\u00fcncellemelerin Sorunlar\u0131<\/h3>\n
React’in e\u015fzamans\u0131z setState<\/code> do\u011fas\u0131 ve toplu i\u015fleme mekanizmas\u0131, do\u011fru kullan\u0131lmad\u0131\u011f\u0131nda beklenmedik davran\u0131\u015flara ve hatalara yol a\u00e7abilir. Bu durumlar genellikle atomik olmayan g\u00fcncellemelerden kaynaklan\u0131r.<\/p>\n
Yar\u0131\u015f Durumlar\u0131 (Race Conditions) ve Eski Kapan\u0131\u015flar (Stale Closures)<\/h4>\n
Bir durum g\u00fcncellemesi, \u00f6nceki duruma ba\u011fl\u0131 oldu\u011funda ve birden fazla setState<\/code> \u00e7a\u011fr\u0131s\u0131 e\u015fzamanl\u0131 olarak ger\u00e7ekle\u015fti\u011finde yar\u0131\u015f durumlar\u0131 ortaya \u00e7\u0131kabilir.<\/p>\n
\u00d6rnek: Bir saya\u00e7 uygulamas\u0131 d\u00fc\u015f\u00fcn\u00fcn. Bir butona iki kez h\u0131zl\u0131ca t\u0131kland\u0131\u011f\u0131nda sayac\u0131n iki artmas\u0131n\u0131 bekleriz.<\/p>\n
\/\/ S\u0131n\u0131f bile\u015feni - Hatal\u0131 yakla\u015f\u0131m\nhandleClick = () => {\n  this.setState({ count: this.state.count + 1 });\n  this.setState({ count: this.state.count + 1 });\n  \/\/ Varsay\u0131lan olarak, bu iki setState \u00e7a\u011fr\u0131s\u0131 ayn\u0131 this.state.count de\u011ferini g\u00f6r\u00fcr.\n  \/\/ \u00d6rne\u011fin, count 0 ise, her iki \u00e7a\u011fr\u0131 da count'\u0131 1 yapmaya \u00e7al\u0131\u015f\u0131r. Sonu\u00e7 1 olur, 2 de\u011fil.\n}\n\n\/\/ Fonksiyonel bile\u015fen - Hatal\u0131 yakla\u015f\u0131m\nconst [count, setCount] = useState(0);\nconst handleClick = () => {\n  setCount(count + 1);\n  setCount(count + 1);\n  \/\/ Benzer \u015fekilde, her iki setCount \u00e7a\u011fr\u0131s\u0131 da ayn\u0131 'count' de\u011ferini (kapan\u0131\u015ftan) yakalar.\n  \/\/ count 0 ise, her iki \u00e7a\u011fr\u0131 da count'\u0131 1 yapmaya \u00e7al\u0131\u015f\u0131r. Sonu\u00e7 1 olur, 2 de\u011fil.\n};<\/code><\/pre>\n
Bu senaryoda, this.state.count<\/code> (s\u0131n\u0131f bile\u015feninde) veya count<\/code> (fonksiyonel bile\u015fende) de\u011feri, setState<\/code> \u00e7a\u011fr\u0131s\u0131 yap\u0131ld\u0131\u011f\u0131nda hen\u00fcz g\u00fcncellenmemi\u015f eski bir de\u011feri temsil eder. Bu durum, “eski kapan\u0131\u015f” (stale closure) olarak bilinir. React, toplu i\u015fleme nedeniyle her iki setState<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 da ayn\u0131 anda i\u015fler ve her ikisi de ayn\u0131 ba\u015flang\u0131\u00e7 de\u011ferini kulland\u0131\u011f\u0131 i\u00e7in nihai sonu\u00e7 beklenen gibi olmaz.<\/p>\n
Kaybolan G\u00fcncellemeler (Lost Updates)<\/h4>\n
Yukar\u0131daki yar\u0131\u015f durumu senaryosu ayn\u0131 zamanda “kaybolan g\u00fcncelleme” sorununu da g\u00f6sterir. Birden fazla g\u00fcncelleme ayn\u0131 anda ayn\u0131 durum par\u00e7as\u0131 \u00fczerinde i\u015flem yapmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131nda ve her biri \u00f6nceki g\u00fcncellemeyi hesaba katmad\u0131\u011f\u0131nda, baz\u0131 g\u00fcncellemeler di\u011ferleri taraf\u0131ndan \u00fczerine yaz\u0131l\u0131r ve kaybolur. Bu, uygulaman\u0131n durumunun tutars\u0131z hale gelmesine neden olabilir.<\/p>\n
Tutars\u0131z UI Durumlar\u0131 (Inconsistent UI States)<\/h4>\n
Atomik olmayan g\u00fcncellemeler, kullan\u0131c\u0131n\u0131n g\u00f6rd\u00fc\u011f\u00fc UI’n\u0131n uygulaman\u0131n dahili durumuyla senkronize olmamas\u0131na neden olabilir. \u00d6rne\u011fin, bir formda birden fazla alan\u0131 ayn\u0131 anda g\u00fcncelleyen ancak bu g\u00fcncellemeleri atomik olarak yapmayan bir mekanizma, formun ge\u00e7ici olarak hatal\u0131 veya eksik bilgi g\u00f6stermesine yol a\u00e7abilir. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkiler ve hatalara davetiye \u00e7\u0131kar\u0131r.<\/p>\n
Atomikli\u011fi Sa\u011flama: En \u0130yi Uygulamalar ve React Mekanizmalar\u0131<\/h3>\n
React, durum g\u00fcncellemelerinin atomik ve tahmin edilebilir olmas\u0131n\u0131 sa\u011flamak i\u00e7in g\u00fc\u00e7l\u00fc mekanizmalar sunar. Geli\u015ftiricilerin bu mekanizmalar\u0131 do\u011fru bir \u015fekilde kullanmas\u0131, uygulaman\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n
Fonksiyonel G\u00fcncellemeler (Updater Functions)<\/h4>\n
Atomik g\u00fcncellemeler i\u00e7in en temel ve en \u00f6nemli kural, \u00f6nceki duruma ba\u011fl\u0131 g\u00fcncellemeler i\u00e7in her zaman fonksiyonel formunu kullanmakt\u0131r.<\/p>\n
\/\/ S\u0131n\u0131f bile\u015feni - Do\u011fru yakla\u015f\u0131m\nhandleClick = () => {\n  this.setState(prevState => ({ count: prevState.count + 1 }));\n  this.setState(prevState => ({ count: prevState.count + 1 }));\n  \/\/ React, bu fonksiyonlar\u0131 s\u0131rayla \u00e7a\u011f\u0131r\u0131r ve her zaman en g\u00fcncel prevState'i sa\u011flar.\n  \/\/ count 0 ise, ilk \u00e7a\u011fr\u0131 count'\u0131 1 yapar, ikinci \u00e7a\u011fr\u0131 prevState'i 1 olarak g\u00f6r\u00fcr ve count'\u0131 2 yapar. Sonu\u00e7 2 olur.\n}\n\n\/\/ Fonksiyonel bile\u015fen - Do\u011fru yakla\u015f\u0131m\nconst [count, setCount] = useState(0);\nconst handleClick = () => {\n  setCount(prevCount => prevCount + 1);\n  setCount(prevCount => prevCount + 1);\n  \/\/ React, bu updater fonksiyonlar\u0131n\u0131 s\u0131rayla \u00e7a\u011f\u0131r\u0131r.\n  \/\/ prevCount her zaman en g\u00fcncel bekleyen durumu temsil eder. Sonu\u00e7 2 olur.\n};<\/code><\/pre>\n
Bu “updater function” deseni, React’in g\u00fcncelleme kuyru\u011funu do\u011fru bir \u015fekilde y\u00f6netmesini sa\u011flar. React, bu fonksiyonlar\u0131 s\u0131rayla i\u015fler ve her birine bir \u00f6nceki g\u00fcncellemenin sonucu olan durumu (prevState<\/code> veya prevCount<\/code>) iletir. Bu, herhangi bir yar\u0131\u015f durumu veya kaybolan g\u00fcncelleme olmadan durumun do\u011fru bir \u015fekilde ilerlemesini garanti eder.<\/p>\n
useReducer<\/code> Hook’u<\/h4>\n
Daha karma\u015f\u0131k durum mant\u0131\u011f\u0131na sahip bile\u015fenler i\u00e7in useReducer<\/code> hook’u, useState<\/code>‘e g\u00f6re daha \u00f6ng\u00f6r\u00fclebilir ve test edilebilir bir alternatif sunar. useReducer<\/code>, Redux benzeri bir desen izler ve durumu merkezi bir “reducer” fonksiyonu arac\u0131l\u0131\u011f\u0131yla g\u00fcncellemeyi zorlar.<\/p>\n
const initialState = { count: 0 };\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  const handleClick = () => {\n    dispatch({ type: 'increment' });\n    dispatch({ type: 'increment' });\n    \/\/ dispatch \u00e7a\u011fr\u0131lar\u0131 e\u015fzamanl\u0131d\u0131r, ancak reducer fonksiyonu s\u0131rayla \u00e7a\u011fr\u0131l\u0131r.\n    \/\/ \u0130lk dispatch state.count'\u0131 1 yapar, ikinci dispatch state.count'\u0131 2 yapar.\n  };\n\n  return (\n    <>\n      Count: {state.count}\n