{"id":36370,"date":"2025-12-14T19:01:01","date_gmt":"2025-12-14T16:01:01","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/giris-react-uygulamalarinizdaki-gizli-performans-katili-mi\/"},"modified":"2025-12-14T19:01:01","modified_gmt":"2025-12-14T16:01:01","slug":"giris-react-uygulamalarinizdaki-gizli-performans-katili-mi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/giris-react-uygulamalarinizdaki-gizli-performans-katili-mi\/","title":{"rendered":"Giri\u015f: React Uygulamalar\u0131n\u0131zdaki Gizli Performans Katili Mi?"},"content":{"rendered":"

React Automatic Batching: Ka\u00e7 Yeniden Render Edilir?<\/span><\/p>\n

React uygulamalar\u0131n\u0131z\u0131n beklenenden daha yava\u015f \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 m\u0131 fark ettiniz? Belki de kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fczdeki ufak bir etkile\u015fim, arka planda gere\u011finden fazla “yeniden render” (re-render) i\u015flemine yol a\u00e7\u0131yor olabilir. Bu durum, \u00f6zellikle b\u00fcy\u00fck ve dinamik uygulamalarda ciddi performans sorunlar\u0131na davetiye \u00e7\u0131karabilir. Ancak endi\u015felenmeyin, React’in “Otomatik Batching” mekanizmas\u0131 tam da bu noktada devreye giriyor ve performans\u0131 art\u0131rmak i\u00e7in gizli bir kahraman gibi \u00e7al\u0131\u015f\u0131yor. Peki, bu sihirli \u00f6zellik tam olarak nedir ve uygulamalar\u0131n\u0131zda ka\u00e7 yeniden render i\u015flemi ger\u00e7ekle\u015fmesini sa\u011flar?<\/p>\n

Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ad\u0131na s\u00fcrekli etkile\u015fim ve dinamik g\u00fcncellemelerle doludur. Bir butona t\u0131klama, bir form alan\u0131na veri girme veya sunucudan veri \u00e7ekme gibi basit g\u00f6r\u00fcnen eylemler bile, arkaplanda karma\u015f\u0131k bir dizi i\u015flemin tetiklenmesine neden olabilir. React, bu karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek i\u00e7in harika bir soyutlama katman\u0131 sunsa da, her state g\u00fcncellemesinin an\u0131nda DOM’u etkilemesi durumunda uygulamalar\u0131m\u0131z h\u0131zla yava\u015flayabilir.<\/p>\n

Bir React bile\u015fenindeki state de\u011fi\u015fti\u011finde, React varsay\u0131lan olarak bu bile\u015feni ve ilgili alt bile\u015fenlerini yeniden render eder. Bu yeniden render i\u015flemi, sanal DOM’un yeniden olu\u015fturulmas\u0131 ve ger\u00e7ek DOM ile aras\u0131ndaki farklar\u0131n bulunup g\u00fcncellenmesi anlam\u0131na gelir. E\u011fer ayn\u0131 anda birden fazla state g\u00fcncellemesi yaparsak ve her biri ayr\u0131 ayr\u0131 bir yeniden render d\u00f6ng\u00fcs\u00fcn\u00fc tetiklerse, bu durum gereksiz hesaplamalara ve dolay\u0131s\u0131yla performans d\u00fc\u015f\u00fc\u015f\u00fcne yol a\u00e7ar. \u0130\u015fte bu noktada “batching” devreye girer. Batching, birden fazla state g\u00fcncellemesini tek bir yeniden render d\u00f6ng\u00fcs\u00fcnde birle\u015ftirerek, React’in bu g\u00fcncellemeleri daha verimli bir \u015fekilde i\u015flemesini sa\u011flar. Bu sayede, uygulaman\u0131z\u0131n daha ak\u0131c\u0131 ve tepkisel kalmas\u0131na yard\u0131mc\u0131 olurken, kullan\u0131c\u0131ya daha iyi bir deneyim sunar\u0131z.<\/p>\n

Bu makalede, React’in otomatik batching mekanizmas\u0131n\u0131 derinlemesine inceleyecek, React 18 ile gelen yenilikleri ele alacak ve bu \u00f6zelli\u011fin uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 nas\u0131l k\u00f6kten de\u011fi\u015ftirebilece\u011fini pratik \u00f6rneklerle g\u00f6sterece\u011fiz. Ayr\u0131ca, otomatik batching’in ne zaman \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ne zaman \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 ve \u00f6zel senaryolarda performans\u0131 daha da optimize etmek i\u00e7in neler yapabilece\u011fimizi ke\u015ffedece\u011fiz. Haz\u0131rsan\u0131z, React’in yeniden render d\u00fcnyas\u0131na ad\u0131m atal\u0131m ve batching’in gizemlerini \u00e7\u00f6zelim!<\/p>\n

Automatic Batching Nedir ve Neden Hayati \u00d6nem Ta\u015f\u0131r?<\/h2>\n

React uygulamalar\u0131nda performans optimizasyonunun temel ta\u015flar\u0131ndan biri olan “batching”, en basit tan\u0131m\u0131yla, birden fazla state g\u00fcncelleme i\u015flemini tek bir yeniden render i\u015flemi alt\u0131nda birle\u015ftirme prensibidir. Peki, neden bu kadar \u00f6nemli? Gelin, konuyu biraz daha derinlemesine inceleyelim.<\/p>\n

React’in Render S\u00fcreci Nas\u0131l \u0130\u015fler?<\/h3>\n

React, bile\u015fen tabanl\u0131 bir mimariye sahiptir ve uygulaman\u0131zdaki her g\u00f6rsel par\u00e7ay\u0131 bir bile\u015fen olarak ele al\u0131r. Bir bile\u015fenin state’i veya props’lar\u0131 de\u011fi\u015fti\u011finde, React bu de\u011fi\u015fikli\u011fi alg\u0131lar ve a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyerek kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc g\u00fcnceller:<\/p>\n

    \n
  1. State veya Props De\u011fi\u015fikli\u011fi:<\/strong> Bir useState<\/code> kancas\u0131 ile state’i g\u00fcncelledi\u011finizde veya \u00fcst bile\u015fenden gelen props’lar de\u011fi\u015fti\u011finde tetiklenir.<\/li>\n
  2. Yeniden Render \u00c7a\u011fr\u0131s\u0131:<\/strong> React, ilgili bile\u015fenin render fonksiyonunu yeniden \u00e7al\u0131\u015ft\u0131r\u0131r. Bu, bile\u015fenin g\u00fcncel state ve props de\u011ferleriyle yeni bir “sanal DOM” a\u011fac\u0131 olu\u015fturmas\u0131 anlam\u0131na gelir.<\/li>\n
  3. Diffing (Fark Bulma):<\/strong> React, yeni olu\u015fan sanal DOM a\u011fac\u0131 ile bir \u00f6nceki sanal DOM a\u011fac\u0131n\u0131 kar\u015f\u0131la\u015ft\u0131r\u0131r. Bu i\u015fleme “reconciliation” veya “diffing” denir. React, yaln\u0131zca de\u011fi\u015fen k\u0131s\u0131mlar\u0131 tespit eder.<\/li>\n
  4. DOM G\u00fcncellemesi:<\/strong> Farkl\u0131l\u0131klar bulundu\u011funda, React bu de\u011fi\u015fiklikleri en verimli \u015fekilde ger\u00e7ek DOM’a yans\u0131t\u0131r. Bu, taray\u0131c\u0131n\u0131n ekran\u0131 yeniden \u00e7izmesine (repaint) ve d\u00fczeni yeniden hesaplamas\u0131na (reflow) neden olabilir.<\/li>\n<\/ol>\n

    Her bir state g\u00fcncellemesi bu ad\u0131mlar\u0131 ayr\u0131 ayr\u0131 tetiklerse, \u00f6zellikle e\u015f zamanl\u0131 veya birbirini takip eden birden fazla g\u00fcncelleme oldu\u011funda, gereksiz ve pahal\u0131 DOM manip\u00fclasyonlar\u0131 ya\u015fan\u0131r. \u0130\u015fte bu durum, uygulamalar\u0131n tepkisizle\u015fmesine ve yava\u015flamas\u0131na neden olan temel fakt\u00f6rlerden biridir.<\/p>\n

    Batching Olmasayd\u0131 Ne Olurdu?<\/h3>\n

    Batching mekanizmas\u0131 olmasayd\u0131, React uygulamalar\u0131m\u0131zdaki her setState<\/code> \u00e7a\u011fr\u0131s\u0131, an\u0131nda bir yeniden render d\u00f6ng\u00fcs\u00fcn\u00fc tetiklerdi. Hayal edin ki bir formunuz var ve kullan\u0131c\u0131 bir butona t\u0131klad\u0131\u011f\u0131nda \u00fc\u00e7 farkl\u0131 state’i (\u00f6rne\u011fin, isLoading<\/code>, error<\/code>, data<\/code>) ayn\u0131 anda g\u00fcncellemeniz gerekiyor. Batching olmadan bu senaryo \u015f\u00f6yle i\u015flerdi:<\/p>\n

      \n
    • setIsLoading(true)<\/code> \u00e7a\u011fr\u0131l\u0131r -> React yeniden render eder (1. render).<\/li>\n
    • setError(null)<\/code> \u00e7a\u011fr\u0131l\u0131r -> React yeniden render eder (2. render).<\/li>\n
    • setData(newData)<\/code> \u00e7a\u011fr\u0131l\u0131r -> React yeniden render eder (3. render).<\/li>\n<\/ul>\n

      Bu durumda, tek bir kullan\u0131c\u0131 eylemi i\u00e7in \u00fc\u00e7 ayr\u0131 yeniden render i\u015flemi ger\u00e7ekle\u015fir ve her biri sanal DOM’u yeniden olu\u015fturup ger\u00e7ek DOM’u g\u00fcncellerdi. Bu, \u00f6zellikle karma\u015f\u0131k bile\u015fen a\u011fa\u00e7lar\u0131na sahip uygulamalarda b\u00fcy\u00fck bir performans y\u00fck\u00fc olu\u015fturur ve CPU kullan\u0131m\u0131n\u0131 art\u0131r\u0131r. Kullan\u0131c\u0131, bu mikro tak\u0131lmalar\u0131 veya gecikmeleri fark etmese bile, uygulaman\u0131n genel performans\u0131 ve enerji t\u00fcketimi olumsuz etkilenir.<\/p>\n

      Uzman \u0130pucu: Batching, React’in arka planda yapt\u0131\u011f\u0131 sessiz bir optimizasyondur. Sizin kodunuzda de\u011fi\u015fiklik yapman\u0131za gerek kalmadan uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu sayede geli\u015ftiriciler olarak ana odak noktam\u0131z, i\u015f mant\u0131\u011f\u0131n\u0131 ve UI’\u0131 tasarlamak olabilir.<\/div>\n

      React’in batching mekanizmas\u0131, bu israf\u0131 \u00f6nlemek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Birden fazla state g\u00fcncellemesini tek bir yeniden render d\u00f6ng\u00fcs\u00fcnde birle\u015ftirerek, gereksiz DOM manip\u00fclasyonlar\u0131n\u0131 minimuma indirir. Bu, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn daha ak\u0131c\u0131 olmas\u0131n\u0131, daha az CPU kullanmas\u0131n\u0131 ve genel olarak daha h\u0131zl\u0131 tepki vermesini sa\u011flar. React 18 ile birlikte gelen “Otomatik Batching” ise bu optimizasyonu daha da ileriye ta\u015f\u0131yarak, React geli\u015ftiricilerinin hayat\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131rm\u0131\u015ft\u0131r.<\/p>\n

      React 18 \u00d6ncesi ve Sonras\u0131 Batching Mekanizmalar\u0131: Farklar Neler?<\/h2>\n

      React’in batching mekanizmas\u0131 her zaman var olmu\u015ftur, ancak zamanla evrim ge\u00e7irerek daha kapsaml\u0131 ve otomatik hale gelmi\u015ftir. \u00d6zellikle React 18, bu konuda devrim niteli\u011finde bir ad\u0131m atarak, geli\u015ftiricilerin performans\u0131 art\u0131rmak i\u00e7in daha az manuel \u00e7aba sarf etmesini sa\u011flam\u0131\u015ft\u0131r.<\/p>\n

      React 18 \u00d6ncesi: Senkron ve Asenkron Senaryolar<\/h3>\n

      React 18’den \u00f6nce batching, genellikle taray\u0131c\u0131 olaylar\u0131 (event handlers) i\u00e7inde yap\u0131lan state g\u00fcncellemeleriyle s\u0131n\u0131rl\u0131yd\u0131. Yani, bir butona t\u0131klama veya bir form g\u00f6nderme gibi do\u011frudan React taraf\u0131ndan y\u00f6netilen olaylar i\u00e7inde birden fazla setState<\/code> \u00e7a\u011fr\u0131s\u0131 yap\u0131ld\u0131\u011f\u0131nda, React bunlar\u0131 otomatik olarak grupland\u0131r\u0131r ve tek bir yeniden render i\u015flemiyle hallederdi. \u00d6rne\u011fin:<\/p>\n

      \n  function Sayac() {\n    const [sayi, setSayi] = React.useState(0);\n    const [aktif, setAktif] = React.useState(false);\n\n    const handleClick = () => {\n      setSayi(s => s + 1); \/\/ 1. state g\u00fcncellemesi\n      setAktif(a => !a);  \/\/ 2. state g\u00fcncellemesi\n      \/\/ React 18 \u00f6ncesi ve sonras\u0131: Bu iki g\u00fcncelleme tek bir renderda birle\u015fir.\n    };\n\n    return (\n      
      \n        
      Say\u0131: {sayi}<\/p>\n        
      Durum: {aktif ? 'Aktif' : 'Pasif'}<\/p>\n