Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini merkeze alarak s\u00fcrekli etkile\u015fim ve dinamik aray\u00fczler sunmak zorunda. Ancak, hi\u00e7 d\u00fc\u015f\u00fcnd\u00fcn\u00fcz m\u00fc; bir butona t\u0131klad\u0131\u011f\u0131n\u0131zda, bir form doldurdu\u011funuzda veya bir liste g\u00fcncellendi\u011finde, ekran\u0131n\u0131zdaki onca karma\u015f\u0131k \u00f6\u011fe nas\u0131l oluyor da kusursuz bir \u015fekilde kendini yeniliyor? Eskiden bu, geli\u015ftiriciler i\u00e7in devasa bir k\u00e2bus ve manuel m\u00fcdahale gerektiren yorucu bir s\u00fcre\u00e7ti. Ama art\u0131k \u00f6yle de\u011fil. G\u00fcn\u00fcm\u00fczde kullan\u0131c\u0131 aray\u00fczleri, reaktivite sayesinde adeta kendi kendine g\u00fcncelleniyor, geli\u015ftiricilere b\u00fcy\u00fck bir y\u00fckten kurtar\u0131yor ve daha h\u0131zl\u0131, daha hatas\u0131z uygulamalar in\u015fa etmelerini sa\u011fl\u0131yor. Bu makalede, bu b\u00fcy\u00fcleyici d\u00f6n\u00fc\u015f\u00fcm\u00fcn nas\u0131l ger\u00e7ekle\u015fti\u011fini, reaktivite kavram\u0131n\u0131n temelinden ba\u015flayarak modern framework’lerin getirdi\u011fi yeniliklere kadar ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
Reaktivite, en temel tan\u0131m\u0131yla, bir veri de\u011fi\u015fti\u011finde ona ba\u011f\u0131ml\u0131 olan her \u015feyin otomatik olarak g\u00fcncellenmesi yetene\u011fidir. Kullan\u0131c\u0131 aray\u00fczleri s\u00f6z konusu oldu\u011funda, bu, uygulaman\u0131n durumunda (state) bir de\u011fi\u015fiklik oldu\u011funda, ekran\u0131m\u0131zdaki ilgili UI elemanlar\u0131n\u0131n manuel m\u00fcdahaleye gerek kalmadan kendini yenilemesi anlam\u0131na gelir. Kula\u011fa harika geliyor, de\u011fil mi? Ancak, webin ilk zamanlar\u0131nda bu durum tamamen farkl\u0131yd\u0131 ve geli\u015ftiriciler i\u00e7in olduk\u00e7a zahmetliydi. O g\u00fcnlerde, bir verinin de\u011fi\u015fmesiyle UI’\u0131n g\u00fcncellenmesi tamamen geli\u015ftiricinin sorumlulu\u011fundayd\u0131 ve bu genellikle do\u011frudan DOM (Document Object Model) manip\u00fclasyonu yoluyla yap\u0131l\u0131rd\u0131.<\/p>\n
Web sayfalar\u0131 ilk ortaya \u00e7\u0131kt\u0131\u011f\u0131nda statikti. Sonras\u0131nda JavaScript’in y\u00fckseli\u015fiyle sayfalar dinamikle\u015fmeye ba\u015flad\u0131 ancak bu dinamizm, geli\u015ftiricinin her bir UI \u00f6\u011fesini tek tek hedefleyip de\u011fi\u015ftirmesini gerektiriyordu. \u00d6rne\u011fin, bir metni g\u00fcncellemek veya bir liste \u00f6\u011fesi eklemek istedi\u011finizde, taray\u0131c\u0131n\u0131n sundu\u011fu Daha sonra, jQuery gibi k\u00fct\u00fcphaneler sahneye \u00e7\u0131kt\u0131 ve geli\u015ftiricilerin hayat\u0131n\u0131 bir nebze olsun kolayla\u015ft\u0131rd\u0131. jQuery, DOM’u se\u00e7meyi ve manip\u00fcle etmeyi \u00e7ok daha basit bir hale getiren g\u00fc\u00e7l\u00fc bir API sunuyordu. Se\u00e7iciler (selectors) ile CSS benzeri ifadeler kullanarak istedi\u011finiz \u00f6\u011feleri kolayca bulabilir, zincirleme y\u00f6ntemlerle (chaining methods) \u00fczerinde i\u015flemler yapabilirdiniz. Olay dinleyicileri (event listeners) eklemek, animasyonlar \u00e7al\u0131\u015ft\u0131rmak veya AJAX istekleri yapmak jQuery ile \u00e7ok daha az kod gerektiriyordu. \u00d6rne\u011fin, bir butona t\u0131kland\u0131\u011f\u0131nda bir metni de\u011fi\u015ftirmek, jQuery ile birka\u00e7 sat\u0131r kodla halledilebiliyordu. Bu, geli\u015ftirme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rd\u0131 ve web uygulamalar\u0131n\u0131 daha etkile\u015fimli hale getirdi.<\/p>\n Ancak, jQuery de reaktif de\u011fildi. Yani, verilerdeki de\u011fi\u015fiklikler hala otomatik olarak UI’a yans\u0131m\u0131yordu. Geli\u015ftirici, verinin de\u011fi\u015fti\u011fini fark etti\u011finde, jQuery’nin sa\u011flad\u0131\u011f\u0131 kolayl\u0131klar\u0131 kullanarak yine manuel olarak DOM’u g\u00fcncellemek zorundayd\u0131. Bu, hala b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda ayn\u0131 temel sorunlar\u0131 yarat\u0131yordu: Veri ile UI senkronizasyonunu sa\u011flamak zor, potansiyel hatalar ve performans darbo\u011fazlar\u0131. \u00d6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli bir e-ticaret sitesinde, \u00fcr\u00fcn filtrelerini d\u00fc\u015f\u00fcnelim. Kullan\u0131c\u0131 kategori, fiyat aral\u0131\u011f\u0131 veya marka se\u00e7ti\u011finde, \u00fcr\u00fcn listesinin an\u0131nda g\u00fcncellenmesi gerekir. jQuery ile bunu yapmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131zda, her filtre de\u011fi\u015fikli\u011finde t\u00fcm \u00fcr\u00fcn listesini yeniden \u00e7izmek veya g\u00fcncellenmesi gereken her bir DOM \u00f6\u011fesini manuel olarak bulup de\u011fi\u015ftirmek zorunda kal\u0131rd\u0131n\u0131z. Bu, hem zaman al\u0131c\u0131 hem de hatalara a\u00e7\u0131k bir s\u00fcre\u00e7ti ve kullan\u0131c\u0131 deneyimini olumsuz etkileyebiliyordu. \u0130\u015fte bu noktada, geli\u015ftiriciler daha iyi bir \u00e7\u00f6z\u00fcm aray\u0131\u015f\u0131na girdi ve reaktivitenin ger\u00e7ek evrimi ba\u015flad\u0131.<\/p>\n Web geli\u015ftirme d\u00fcnyas\u0131, \u00f6zellikle kullan\u0131c\u0131 aray\u00fczlerinin karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, yeni bir paradigma aray\u0131\u015f\u0131na girdi. Bu aray\u0131\u015f\u0131n en b\u00fcy\u00fck meyvelerinden biri, Facebook taraf\u0131ndan geli\u015ftirilen React oldu. React, 2013 y\u0131l\u0131nda ortaya \u00e7\u0131kt\u0131\u011f\u0131nda, “reaktivite” kavram\u0131n\u0131 yepyeni bir boyuta ta\u015f\u0131yarak UI g\u00fcncellemeleri konusunda devrim niteli\u011finde bir yakla\u015f\u0131m sundu: Sanal DOM (Virtual DOM) ve tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131. Bu iki temel prensip, geli\u015ftiricilerin UI’\u0131 y\u00f6netme bi\u00e7imini k\u00f6kten de\u011fi\u015ftirdi ve modern web uygulamalar\u0131n\u0131n temelini olu\u015fturdu.<\/p>\n Peki, Virtual DOM nedir ve neden bu kadar \u00f6nemlidir? Daha \u00f6nce bahsetti\u011fimiz gibi, ger\u00e7ek DOM’u do\u011frudan manip\u00fcle etmek pahal\u0131 ve performans a\u00e7\u0131s\u0131ndan verimsiz bir i\u015flemdir. React, bu sorunu \u00e7\u00f6zmek i\u00e7in Virtual DOM ad\u0131n\u0131 verdi\u011fi, ger\u00e7ek DOM’un haf\u0131zada tutulan bir kopyas\u0131n\u0131 tan\u0131tt\u0131. Uygulaman\u0131n state’inde bir de\u011fi\u015fiklik oldu\u011funda, React do\u011frudan ger\u00e7ek DOM’u g\u00fcncellemek yerine, \u00f6nce Virtual DOM \u00fczerinde gerekli de\u011fi\u015fiklikleri yapar. Bu, asl\u0131nda basit JavaScript objelerinden olu\u015fan hafif bir a\u011fa\u00e7 yap\u0131s\u0131d\u0131r ve \u00fczerinde i\u015flem yapmak \u00e7ok daha h\u0131zl\u0131d\u0131r. React, bu yeni Virtual DOM a\u011fac\u0131 ile bir \u00f6nceki Virtual DOM a\u011fac\u0131n\u0131 kar\u015f\u0131la\u015ft\u0131r\u0131r. Bu kar\u015f\u0131la\u015ft\u0131rma i\u015flemine “diffing” veya “reconciliation” denir ve React’\u0131n ak\u0131ll\u0131 algoritmalar\u0131 sayesinde sadece ger\u00e7ekte de\u011fi\u015fen k\u0131s\u0131mlar belirlenir. Sonras\u0131nda, bu belirlenen minimal de\u011fi\u015fiklikler tek seferde, optimize edilmi\u015f bir \u015fekilde ger\u00e7ek DOM’a uygulan\u0131r. B\u00f6ylece, taray\u0131c\u0131n\u0131n yeniden \u00e7izim maliyeti en aza indirilir ve uygulama performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde artar. Geli\u015ftiriciler, UI’\u0131n nas\u0131l g\u00fcncellenece\u011fini d\u00fc\u015f\u00fcnmek zorunda kalmaz; sadece uygulaman\u0131n state’ini de\u011fi\u015ftirirler, gerisini React halleder. Bu, tam anlam\u0131yla “UI g\u00fcncellemelerinin kendi kendine bakmay\u0131 \u00f6\u011frenmesi” durumudur.<\/p>\n React’\u0131n bir di\u011fer temel prensibi ise tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131d\u0131r (One-Way Data Flow). Bu, verilerin uygulaman\u0131n en \u00fcst seviyesinden (\u00f6rne\u011fin, ana component’ten) alt component’lere do\u011fru tek bir y\u00f6nde akt\u0131\u011f\u0131 anlam\u0131na gelir. Bir component’in state’i de\u011fi\u015fti\u011finde, bu de\u011fi\u015fiklik sadece o component’i ve alt\u0131ndaki t\u00fcm ilgili component’leri etkiler. Veriler her zaman “yukar\u0131dan a\u015fa\u011f\u0131ya” do\u011fru akar. Bu yakla\u015f\u0131m, uygulaman\u0131n durumunu (state) takip etmeyi ve hatalar\u0131 ay\u0131klamay\u0131 \u00e7ok daha kolay hale getirir. Her \u015feyin belirli bir d\u00fczende akmas\u0131, karma\u015f\u0131k veri ba\u011f\u0131ml\u0131l\u0131klar\u0131ndan kaynaklanan s\u00fcrpriz hatalar\u0131n \u00f6n\u00fcne ge\u00e7er. Component tabanl\u0131 mimari de React’\u0131n sundu\u011fu \u00f6nemli bir yeniliktir. UI’\u0131 k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve tekrar kullan\u0131labilir par\u00e7alara (component’lere) b\u00f6lme fikri, geli\u015ftirme s\u00fcrecini mod\u00fcler hale getirir, kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n Bir \u00f6rnekle a\u00e7\u0131klayal\u0131m. Basit bir saya\u00e7 uygulamas\u0131 d\u00fc\u015f\u00fcn\u00fcn. React ile bir component i\u00e7inde bir saya\u00e7 de\u011feri (state) tutars\u0131n\u0131z. Bir butona bas\u0131ld\u0131\u011f\u0131nda, bu sayac\u0131n de\u011ferini art\u0131ran bir fonksiyon \u00e7a\u011f\u0131r\u0131rs\u0131n\u0131z. React, sayac\u0131n state’i de\u011fi\u015fti\u011finde, Virtual DOM \u00fczerinde de\u011fi\u015fikli\u011fi fark eder, \u00f6ncekiyle kar\u015f\u0131la\u015ft\u0131r\u0131r ve yaln\u0131zca g\u00fcncellenen say\u0131 metninin oldu\u011fu k\u0131sm\u0131 ger\u00e7ek DOM’da de\u011fi\u015ftirir. Siz sadece sayac\u0131 g\u00fcncellersiniz, React’\u0131n arkas\u0131ndaki mekanizma otomatik olarak ekran\u0131 yeniler. \u0130\u015fte modern bir React component’i ve state g\u00fcncellemesi nas\u0131l g\u00f6r\u00fcn\u00fcr:<\/p>\n Saya\u00e7: {count}<\/p>\n document.getElementById()<\/code>, innerHTML<\/code> veya createElement()<\/code> gibi DOM API’lar\u0131n\u0131 do\u011frudan kullanman\u0131z gerekirdi. Bu, k\u00fc\u00e7\u00fck, birka\u00e7 etkile\u015fimli \u00f6\u011fesi olan sayfalar i\u00e7in y\u00f6netilebilir olabilirdi, ancak uygulama b\u00fcy\u00fcd\u00fck\u00e7e ve aray\u00fcz karma\u015f\u0131kla\u015ft\u0131k\u00e7a, bu manuel yakla\u015f\u0131m tam anlam\u0131yla bir kabusa d\u00f6n\u00fc\u015f\u00fcyordu. Hangi \u00f6\u011fenin ne zaman ve neden g\u00fcncellendi\u011fini takip etmek, hatalar\u0131 bulmak ve d\u00fczeltmek inan\u0131lmaz derecede zordu. Performans sorunlar\u0131 da cabas\u0131yd\u0131, \u00e7\u00fcnk\u00fc her DOM manip\u00fclasyonu taray\u0131c\u0131 i\u00e7in maliyetli bir i\u015flemdi ve gereksiz g\u00fcncellemeler sayfay\u0131 yava\u015flat\u0131yordu.<\/p>\nSanal DOM (Virtual DOM) ve Tek Y\u00f6nl\u00fc Veri Ak\u0131\u015f\u0131: React Neyi De\u011fi\u015ftirdi?<\/h2>\n
\nimport React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(count + 1);\n };\n\n return (\n