{"id":34393,"date":"2025-11-16T04:01:13","date_gmt":"2025-11-16T01:01:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-render-optimizasyonunda-uzmanlasma-memoizationdan-uretim-kaliplarina\/"},"modified":"2025-11-16T04:01:13","modified_gmt":"2025-11-16T01:01:13","slug":"react-render-optimizasyonunda-uzmanlasma-memoizationdan-uretim-kaliplarina","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-render-optimizasyonunda-uzmanlasma-memoizationdan-uretim-kaliplarina\/","title":{"rendered":"React Render Optimizasyonunda Uzmanla\u015fma: Memoization’dan \u00dcretim Kal\u0131plar\u0131na"},"content":{"rendered":"

<\/p>\n

React uygulamalar\u0131n\u0131z\u0131n beklenenden daha yava\u015f \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 fark ettiniz mi? Modern web geli\u015ftirmenin vazge\u00e7ilmezi React’te performans, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir fakt\u00f6rd\u00fcr. Bu kapsaml\u0131 rehberde, React render optimizasyonunun derinliklerine inecek, memoization tekniklerinden ger\u00e7ek d\u00fcnya \u00fcretim kal\u0131plar\u0131na kadar her a\u015famay\u0131 ad\u0131m ad\u0131m inceleyerek uygulamalar\u0131n\u0131z\u0131n h\u0131z\u0131n\u0131 ve tepki s\u00fcresini nas\u0131l art\u0131rabilece\u011finizi ke\u015ffedeceksiniz.<\/p>\n

React, dinamik kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir k\u00fct\u00fcphane olsa da, yanl\u0131\u015f kullan\u0131ld\u0131\u011f\u0131nda veya optimize edilmedi\u011finde performans sorunlar\u0131na yol a\u00e7abilir. Temelinde React, “Virtual DOM” ad\u0131 verilen bir mekanizma kullanarak DOM manip\u00fclasyonlar\u0131n\u0131 minimize eder. Bir bile\u015fenin durumu veya props’lar\u0131 de\u011fi\u015fti\u011finde, React bu bile\u015feni ve genellikle alt bile\u015fenlerini de yeniden render eder. Bu s\u00fcrece “reconciliation” denir ve React, yeni Virtual DOM a\u011fac\u0131 ile bir \u00f6nceki a\u011fac\u0131 kar\u015f\u0131la\u015ft\u0131rarak yaln\u0131zca gerekli DOM g\u00fcncellemelerini yapar.<\/p>\n

Ancak, Virtual DOM olduk\u00e7a h\u0131zl\u0131 olsa da, bir bile\u015fenin gereksiz yere render edilmesi bile performans\u0131 olumsuz etkileyebilir. \u00d6zellikle karma\u015f\u0131k bile\u015fen a\u011fa\u00e7lar\u0131nda, k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklik y\u00fczlerce bile\u015fenin yeniden hesaplanmas\u0131na yol a\u00e7abilir. Bu durum, kullan\u0131c\u0131n\u0131n aray\u00fczde tak\u0131lmalar, gecikmeler veya yava\u015f y\u00fckleme s\u00fcreleri ya\u015famas\u0131na neden olur. Kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan bak\u0131ld\u0131\u011f\u0131nda, geciken her milisaniye potansiyel m\u00fc\u015fteri kayb\u0131 veya kullan\u0131c\u0131 memnuniyetsizli\u011fi anlam\u0131na gelebilir. E-ticaret siteleri i\u00e7in bu, terk edilmi\u015f al\u0131\u015fveri\u015f sepetlerine, SaaS uygulamalar\u0131 i\u00e7in ise d\u00fc\u015f\u00fck etkile\u015fime yol a\u00e7abilir. \u0130\u015fte bu noktada, render optimizasyonu devreye girer. Amac\u0131m\u0131z, React’in yaln\u0131zca ger\u00e7ekten de\u011fi\u015fen veya de\u011fi\u015fmesi gereken bile\u015fenleri yeniden render etmesini sa\u011flamakt\u0131r. Bunu yaparak, CPU kullan\u0131m\u0131n\u0131 azalt\u0131r, pil \u00f6mr\u00fcn\u00fc korur ve uygulaman\u0131n genel tepki s\u00fcresini art\u0131r\u0131r\u0131z. Bir\u00e7ok geli\u015ftirici, “React h\u0131zl\u0131d\u0131r, optimizasyona gerek yok” yan\u0131lg\u0131s\u0131na kap\u0131lsa da, uygulaman\u0131z \u00f6l\u00e7eklendik\u00e7e ve veri karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, bu d\u00fc\u015f\u00fcnce ciddi sorunlara neden olabilir.<\/p>\n

Gereksiz render’lar, sadece hesaplama g\u00fcc\u00fcn\u00fc t\u00fcketmekle kalmaz, ayn\u0131 zamanda JavaScript \u00e7al\u0131\u015fma zaman\u0131nda da ek y\u00fck olu\u015fturur. Bu, \u00f6zellikle d\u00fc\u015f\u00fck g\u00fc\u00e7l\u00fc cihazlar veya yava\u015f internet ba\u011flant\u0131lar\u0131 kullanan mobil kullan\u0131c\u0131lar i\u00e7in belirgin bir sorun haline gelir. Dolay\u0131s\u0131yla, React uygulamalar\u0131n\u0131z\u0131n \u00fcretim ortam\u0131nda beklenen performans\u0131 sergilemesini istiyorsan\u0131z, render optimizasyonu bir “olmal\u0131” de\u011fil, bir “zorunluluktur”. Performans iyile\u015ftirmeleri, sadece daha h\u0131zl\u0131 bir uygulama anlam\u0131na gelmez; ayn\u0131 zamanda daha \u00f6l\u00e7eklenebilir, s\u00fcrd\u00fcr\u00fclebilir ve bak\u0131m\u0131 daha kolay bir kod taban\u0131 anlam\u0131na da gelir. \u0130lerleyen b\u00f6l\u00fcmlerde, bu gereksiz render’lar\u0131 nas\u0131l tespit edece\u011fimizi ve hangi stratejilerle engelleyebilece\u011fimizi detayl\u0131ca inceleyece\u011fiz.<\/p>\n

Gereksiz Render’lar\u0131 Tespit Etmenin Yollar\u0131 Nelerdir?<\/h2>\n

Optimizasyon s\u00fcrecinin ilk ve en \u00f6nemli ad\u0131m\u0131, performans darbo\u011fazlar\u0131n\u0131 do\u011fru bir \u015fekilde te\u015fhis etmektir. Nereye odaklanman\u0131z gerekti\u011fini bilmeden rastgele optimizasyonlar yapmak, genellikle zaman kayb\u0131na ve bazen daha k\u00f6t\u00fc performansa yol a\u00e7abilir. React ekosistemi, bu tespiti kolayla\u015ft\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar.<\/p>\n

React DevTools Profiler ile Derinlemesine Analiz Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n

React DevTools, taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131na entegre olan bir eklentidir ve React uygulamalar\u0131n\u0131z\u0131n \u00e7al\u0131\u015fma zaman\u0131 davran\u0131\u015f\u0131n\u0131 anlaman\u0131za yard\u0131mc\u0131 olur. \u00d6zellikle “Profiler” sekmesi, hangi bile\u015fenlerin ne s\u0131kl\u0131kta ve ne kadar s\u00fcrede render edildi\u011fini g\u00f6rselle\u015ftirmek i\u00e7in paha bi\u00e7ilmezdir.<\/p>\n

Bir performans kayd\u0131 ba\u015flatt\u0131\u011f\u0131n\u0131zda, React DevTools, uygulaman\u0131zdaki her render d\u00f6ng\u00fcs\u00fcn\u00fc kaydeder. Kayd\u0131 durdurdu\u011funuzda, bir “alev grafi\u011fi” veya “s\u0131ral\u0131 grafik” \u015feklinde g\u00f6rsel bir \u00f6zet sunar. Alev grafi\u011finde, her \u00e7ubuk bir bile\u015feni temsil eder ve geni\u015fli\u011fi, o bile\u015fenin render s\u00fcresiyle orant\u0131l\u0131d\u0131r. Uzun ve s\u0131k g\u00f6r\u00fcnen \u00e7ubuklar, potansiyel darbo\u011fazlar\u0131 g\u00f6sterir. Bir bile\u015fene t\u0131klad\u0131\u011f\u0131n\u0131zda, o bile\u015fenin props’lar\u0131n\u0131n veya state’inin neden de\u011fi\u015fti\u011fini g\u00f6steren “Render Nedeni” b\u00f6l\u00fcm\u00fcn\u00fc de g\u00f6rebilirsiniz. Bu, gereksiz render’lar\u0131n k\u00f6k nedenini anlamak i\u00e7in hayati bir bilgidir.<\/p>\n

\u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda, kullan\u0131c\u0131 \u00fcr\u00fcn filtrelerini de\u011fi\u015ftirirken t\u00fcm \u00fcr\u00fcn listesinin (binlerce \u00fcr\u00fcn kart\u0131n\u0131n) yeniden render edildi\u011fini fark edebilirsiniz. Profiler, bu “\u00dcr\u00fcnKart\u0131” bile\u015fenlerinin her birinin neden yeniden render edildi\u011fini g\u00f6sterebilir. Belki de \u00fcst bile\u015fenden gelen bir prop, de\u011fer olarak ayn\u0131 kalsa bile referans\u0131 de\u011fi\u015fti\u011fi i\u00e7in t\u00fcm alt bile\u015fenlerin yeniden render edilmesine neden oluyordur.<\/p>\n

\n Uzman \u0130pucu: Profiler’\u0131 kullan\u0131rken “Highlight updates when components render” se\u00e7ene\u011fini etkinle\u015ftirin. Bu, uygulaman\u0131z \u00e7al\u0131\u015f\u0131rken yeniden render edilen bile\u015fenleri g\u00f6rsel olarak mavi bir kutuyla \u00e7evreleyerek an\u0131nda geri bildirim sa\u011flar.\n <\/div>\n<\/p>\n

Neden Yeniden Render Ediliyor? why-did-you-render K\u00fct\u00fcphanesi Ne \u0130\u015fe Yarar?<\/h3>\n

React DevTools g\u00fc\u00e7l\u00fc olsa da, bazen bir bile\u015fenin neden yeniden render edildi\u011fini tam olarak anlamak zordur. \u0130\u015fte bu noktada <\/p>\n

why-did-you-render<\/pre>\n
<\/code> k\u00fct\u00fcphanesi devreye girer. Bu geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131, bile\u015fenlerinizin ne zaman ve neden yeniden render edildi\u011fini konsola loglayarak size \u00e7ok daha spesifik bilgiler sunar.<\/p>\n
Kurulumu olduk\u00e7a basittir:<\/p>\n
\nimport React from 'react';\n\nif (process.env.NODE_ENV === 'development') {\n  const whyDidYouRender = require('@welldone-software\/why-did-you-render');\n  whyDidYouRender(React, {\n    trackAllPureComponents: true, \/\/ T\u00fcm PureComponent'leri ve React.memo bile\u015fenlerini izler\n    trackHooks: true, \/\/ Hook'lar\u0131 da izler\n    logOnDifferentValues: true, \/\/ Sadece de\u011ferler farkl\u0131 oldu\u011funda loglar\n    \/\/ Di\u011fer se\u00e7enekler...\n  });\n}\n    <\/pre>\n
<\/code><\/p>\n
Bu kodu genellikle uygulaman\u0131z\u0131n ana giri\u015f dosyas\u0131n\u0131n (\u00f6rn. index.js<\/code>) ba\u015f\u0131na, geli\u015ftirme ortam\u0131nda \u00e7al\u0131\u015facak \u015fekilde eklersiniz. Ard\u0131ndan, izlemek istedi\u011finiz herhangi bir bile\u015fene whyDidYouRender = true;<\/code> prop'unu ekleyerek veya trackAllPureComponents: true<\/code> ile t\u00fcm saf bile\u015fenleri izleyerek detayl\u0131 loglar alabilirsiniz.<\/p>\n
Konsolda, bir bile\u015fenin neden yeniden render edildi\u011fini g\u00f6receksiniz: \"props de\u011fi\u015fti\", \"state de\u011fi\u015fti\", \"hook ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\" gibi a\u00e7\u0131klamalarla birlikte, eski ve yeni de\u011ferler aras\u0131ndaki farklar\u0131 g\u00f6steren detayl\u0131 tablolar sunar. \u00d6rne\u011fin, bir \u00f6nceki \"\u00dcr\u00fcnKart\u0131\" \u00f6rne\u011finde, <\/p>\n
why-did-you-render<\/pre>\n
<\/code>, prop olarak ge\u00e7en bir objenin referans\u0131n\u0131n de\u011fi\u015fti\u011fini, ancak i\u00e7indeki t\u00fcm alanlar\u0131n ayn\u0131 kald\u0131\u011f\u0131n\u0131 g\u00f6sterebilir. Bu, <\/p>\n
React.memo<\/pre>\n
<\/code> gibi optimizasyon tekniklerini uygulamak i\u00e7in size do\u011frudan bir hedef verir.<\/p>\n
Vaka Analizi: B\u00fcy\u00fck Bir E-ticaret Uygulamas\u0131nda \u00dcr\u00fcn Listesi Optimizasyonu<\/h3>\n
Ger\u00e7ek bir senaryoyu ele alal\u0131m: Binlerce \u00fcr\u00fcn\u00fcn listelendi\u011fi, s\u00fcrekli filtrelenen ve s\u0131ralanan bir e-ticaret sayfas\u0131. Kullan\u0131c\u0131 her filtreyi de\u011fi\u015ftirdi\u011finde veya arama kutusuna yaz\u0131 yazd\u0131\u011f\u0131nda, sayfa belirgin \u015fekilde tak\u0131l\u0131yor ve yava\u015fl\u0131yor.<\/p>\n
    \n
  1. Tespit:<\/strong> \u0130lk olarak React DevTools Profiler'\u0131 a\u00e7t\u0131k. Kullan\u0131c\u0131 bir filtre uygulad\u0131\u011f\u0131nda, t\u00fcm \"\u00dcr\u00fcnListesi\" bile\u015feninin ve i\u00e7erisindeki her \"\u00dcr\u00fcnKart\u0131\" bile\u015feninin yeniden render edildi\u011fini g\u00f6rd\u00fck. Grafikteki uzun \u00e7ubuklar ve y\u00fcksek render s\u00fcreleri dikkat \u00e7ekiciydi.<\/li>\n
  2. Derinlemesine \u0130nceleme:<\/strong> \"\u00dcr\u00fcnKart\u0131\" bile\u015fenine t\u0131klad\u0131\u011f\u0131m\u0131zda, profilin \"Render Nedeni\" b\u00f6l\u00fcm\u00fcnde, \u00fcst bile\u015fenden gelen '\u00fcr\u00fcn' objesinin her seferinde yeni bir referansla ge\u00e7ti\u011fini g\u00f6rd\u00fck. \u00dcr\u00fcn verileri asl\u0131nda de\u011fi\u015fmemi\u015fti, ancak liste filtresi uyguland\u0131\u011f\u0131nda, \u00fcst bile\u015fen yeni bir \u00fcr\u00fcn dizisi olu\u015fturdu\u011fu i\u00e7in, her bir \u00fcr\u00fcn objesi de yeni bir referansla \"\u00dcr\u00fcnKart\u0131\"na iletiliyordu.<\/li>\n
  3. \u00c7\u00f6z\u00fcm \u00d6nerisi:<\/strong> Bu durumda,\n
    React.memo<\/pre>\n
    <\/code> kullanarak \"\u00dcr\u00fcnKart\u0131\" bile\u015fenini optimize etmek mant\u0131kl\u0131 olacakt\u0131r. E\u011fer bir \"\u00dcr\u00fcnKart\u0131\"n\u0131n props'lar\u0131 (\u00fcr\u00fcn bilgisi) asl\u0131nda de\u011fi\u015fmediyse, yeniden render edilmesini engelleyebiliriz.<\/li>\n<\/ol>\n
    Bu vaka analizi, do\u011fru ara\u00e7larla problemin k\u00f6k\u00fcn\u00fc bulman\u0131n ve hedefe y\u00f6nelik \u00e7\u00f6z\u00fcmler \u00fcretmenin ne kadar \u00f6nemli oldu\u011funu g\u00f6stermektedir. Optimizasyon her zaman \"daha h\u0131zl\u0131 kod yazmak\" anlam\u0131na gelmez; \u00e7o\u011fu zaman \"gereksiz i\u015fi yapmaktan ka\u00e7\u0131nmak\" anlam\u0131na gelir.<\/p>\n
    Memoization Nedir ve React'te Nas\u0131l Kullan\u0131l\u0131r? (React.memo, useCallback, useMemo)<\/h2>\n
    Memoization, bilgisayar bilimlerinde yayg\u0131n olarak kullan\u0131lan bir optimizasyon tekni\u011fidir. Bir fonksiyonun veya bile\u015fenin daha \u00f6nce hesaplanm\u0131\u015f sonu\u00e7lar\u0131n\u0131, ayn\u0131 girdilerle tekrar \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda kullanmak \u00fczere \u00f6nbelle\u011fe almas\u0131 prensibine dayan\u0131r. React ba\u011flam\u0131nda, bu, bile\u015fenlerin veya pahal\u0131 hesaplamalar\u0131n gereksiz yere tekrar y\u00fcr\u00fct\u00fclmesini \u00f6nleyerek performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.<\/p>\n
    React.memo ile Bile\u015fenlerin Yeniden Render Edilmesini Nas\u0131l Engelleriz?<\/h3>\n
    React.memo<\/pre>\n
    <\/code>, fonksiyonel bile\u015fenler i\u00e7in bir higher-order component (HOC) olarak i\u015flev g\u00f6r\u00fcr. Bir bile\u015feni <\/p>\n
    React.memo<\/pre>\n
    <\/code> ile sarmalad\u0131\u011f\u0131n\u0131zda, React, bu bile\u015fenin props'lar\u0131n\u0131n bir \u00f6nceki render ile ayn\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. E\u011fer props'lar de\u011fi\u015fmemi\u015fse, React bile\u015feni yeniden render etmek yerine, son render edilmi\u015f \u00e7\u0131kt\u0131s\u0131n\u0131 kullan\u0131r. Bu, \u00f6zellikle s\u0131k g\u00fcncellenen \u00fcst bile\u015fenlerin alt\u0131ndaki \"saf\" (pure) bile\u015fenler i\u00e7in \u00e7ok etkilidir.<\/p>\n
    \nimport React from 'react';\n\nconst UrunKart = ({ urunAdi, fiyat, resimUrl }) => {\n  console.log(${urunAdi} render edildi<\/code>);\n  return (\n    
    \n      {urunAdi}\n      
    {urunAdi}<\/h3>\n      
    {fiyat} TL<\/p>\n    <\/div>\n  );\n};\n\n\/\/ React.memo ile UrunKart bile\u015fenini sarmal\u0131yoruz\nconst MemoizedUrunKart = React.memo(UrunKart);\n\nexport default MemoizedUrunKart;\n    <\/pre>\n
    <\/code><\/p>\n
    Yukar\u0131daki \u00f6rnekte, <\/p>\n
    MemoizedUrunKart<\/pre>\n
    <\/code> bile\u015feni, props'lar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece yeniden render edilmeyecektir. Varsay\u0131lan olarak, <\/p>\n
    React.memo<\/pre>\n
    <\/code> props'lar\u0131 s\u0131\u011f (shallow) bir \u015fekilde kar\u015f\u0131la\u015ft\u0131r\u0131r. Yani, objeler veya diziler i\u00e7in sadece referans e\u015fitli\u011fini kontrol eder. E\u011fer props'larda karma\u015f\u0131k objeler veya diziler varsa ve bunlar\u0131n i\u00e7eri\u011finin de\u011fi\u015fip de\u011fi\u015fmedi\u011fine g\u00f6re render'\u0131 kontrol etmek istiyorsan\u0131z, <\/p>\n
    React.memo<\/pre>\n
    <\/code>'nun ikinci arg\u00fcman\u0131 olarak \u00f6zel bir kar\u015f\u0131la\u015ft\u0131rma fonksiyonu sa\u011flayabilirsiniz:<\/p>\n
    \nconst MemoizedUrunKart = React.memo(UrunKart, (prevProps, nextProps) => {\n  \/\/ Sadece urunAdi ve fiyat de\u011fi\u015ftiyse render et\n  return prevProps.urunAdi === nextProps.urunAdi && prevProps.fiyat === nextProps.fiyat;\n});\n    <\/pre>\n
    <\/code><\/p>\n
    Ancak, her bile\u015feni <\/p>\n
    React.memo<\/pre>\n
    <\/code> ile sarmalamak her zaman en iyi \u00e7\u00f6z\u00fcm de\u011fildir. Props kar\u015f\u0131la\u015ft\u0131rma i\u015flemi de kendi ba\u015f\u0131na bir maliyet gerektirir. E\u011fer bir bile\u015fen \u00e7ok s\u0131k de\u011fi\u015fen props'lara sahipse veya render maliyeti \u00e7ok d\u00fc\u015f\u00fckse, <\/p>\n
    React.memo<\/pre>\n
    <\/code> kullanman\u0131n getirdi\u011fi ek y\u00fck, sa\u011flad\u0131\u011f\u0131 faydadan daha fazla olabilir. Ak\u0131ll\u0131ca ve hedefe y\u00f6nelik kullan\u0131lmal\u0131d\u0131r.<\/p>\n
    useCallback ile Fonksiyon Referanslar\u0131n\u0131 Nas\u0131l Optimize Ederiz?<\/h3>\n
    React'te fonksiyonlar birer objedir ve her render'da yeniden olu\u015fturulurlar. Bu durum, \u00f6zellikle bu fonksiyonlar alt bile\u015fenlere prop olarak ge\u00e7irildi\u011finde sorun yaratabilir. <\/p>\n
    React.memo<\/pre>\n
    <\/code> ile optimize edilmi\u015f bir alt bile\u015fen, kendisine prop olarak ge\u00e7en bir fonksiyonun referans\u0131 her render'da de\u011fi\u015fti\u011fi i\u00e7in gereksiz yere yeniden render edilebilir. \u0130\u015fte burada <\/p>\n
    useCallback<\/pre>\n
    <\/code> hook'u devreye girer.<\/p>\n
    useCallback<\/pre>\n
    <\/code>, bir fonksiyonu ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece \u00f6nbelle\u011fe alman\u0131z\u0131 sa\u011flar. B\u00f6ylece, her render'da ayn\u0131 fonksiyon referans\u0131n\u0131 elde edersiniz ve bu da alt bile\u015fenlerin gereksiz yere yeniden render edilmesini engeller.<\/p>\n
    \nimport React, { useState, useCallback } from 'react';\n\nconst UrunListesi = () => {\n  const [sayac, setSayac] = useState(0);\n  const [urunler, setUrunler] = useState([{ id: 1, ad: 'Klavye', fiyat: 150 }]);\n\n  const handleSepeteEkle = useCallback((urunId) => {\n    console.log(${urunId} sepete eklendi!<\/code>);\n    \/\/ Sepet state'ini g\u00fcncelleme logic'i\n  }, []); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi bo\u015f oldu\u011fu i\u00e7in bu fonksiyon sadece bir kez olu\u015fturulur\n\n  return (\n    
    \n