React ekosistemi, bile\u015fenler aras\u0131 mant\u0131k payla\u015f\u0131m\u0131 ve yeniden kullan\u0131labilirli\u011fi sa\u011flamak i\u00e7in \u00e7e\u015fitli g\u00fc\u00e7l\u00fc desenler sunar. Bu desenlerden biri olan Y\u00fcksek Mertebeden Bile\u015fenler (Higher-Order Components – HOCs), React’in ilk d\u00f6nemlerinden itibaren karma\u015f\u0131k uygulamalarda yayg\u0131n olarak kullan\u0131lm\u0131\u015f ve bir\u00e7ok pop\u00fcler k\u00fct\u00fcphanenin temelini olu\u015fturmu\u015ftur. Her ne kadar Hooks’un ortaya \u00e7\u0131k\u0131\u015f\u0131yla birlikte HOC’lar\u0131n kullan\u0131m s\u0131kl\u0131\u011f\u0131 yeni projelerde azalm\u0131\u015f olsa da, React geli\u015ftiricilerinin bu deseni anlamas\u0131, mevcut kod tabanlar\u0131n\u0131 y\u00f6netmek, eski k\u00fct\u00fcphaneleri kullanmak ve React’in evrimini kavramak a\u00e7\u0131s\u0131ndan hayati \u00f6neme sahiptir. Bu makalede, HOC’lar\u0131n ne oldu\u011funu, neden kullan\u0131ld\u0131klar\u0131n\u0131, nas\u0131l olu\u015fturulduklar\u0131n\u0131, avantajlar\u0131n\u0131, dezavantajlar\u0131n\u0131 ve g\u00fcn\u00fcm\u00fczdeki yerini detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Y\u00fcksek Mertebeden Bile\u015fen (Higher-Order Component – HOC), React API’sinin bir par\u00e7as\u0131 de\u011fildir; React’in bile\u015fim \u00f6zelli\u011finden yararlanan bir desendir. Tan\u0131m olarak, bir HOC, bir React bile\u015fenini girdi olarak alan ve geli\u015ftirilmi\u015f \u00f6zelliklere sahip yeni bir React bile\u015feni d\u00f6nd\u00fcren bir fonksiyondur. Bu tan\u0131m, JavaScript’teki “Y\u00fcksek Mertebeden Fonksiyonlar” (Higher-Order Functions) kavram\u0131na benzer. Y\u00fcksek Mertebeden Fonksiyonlar, ba\u015fka fonksiyonlar\u0131 arg\u00fcman olarak alan veya bir fonksiyon d\u00f6nd\u00fcren fonksiyonlard\u0131r (\u00f6rne\u011fin Basit\u00e7e ifade etmek gerekirse:<\/p>\n Veya fonksiyonel bir bile\u015fen d\u00f6nd\u00fcren haliyle:<\/p>\n Burada React uygulamalar\u0131 b\u00fcy\u00fcd\u00fck\u00e7e, farkl\u0131 bile\u015fenler aras\u0131nda ayn\u0131 mant\u0131\u011f\u0131 veya i\u015flevselli\u011fi tekrar tekrar yazma ihtiyac\u0131 ortaya \u00e7\u0131kabilir. Bu durum, “Kendini Tekrar Etme” (Don’t Repeat Yourself – DRY) ilkesine ayk\u0131r\u0131d\u0131r ve kodun s\u00fcrd\u00fcr\u00fclebilirli\u011fini, test edilebilirli\u011fini ve okunabilirli\u011fini olumsuz etkiler. HOC’lar, bu t\u00fcr \u00e7apraz kesen ilgileri (cross-cutting concerns) \u00e7\u00f6zmek i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sunar.<\/p>\n En temel nedenlerden biri, bile\u015fenler aras\u0131nda durum mant\u0131\u011f\u0131n\u0131, ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131 veya di\u011fer davran\u0131\u015flar\u0131 payla\u015fmakt\u0131r. \u00d6rne\u011fin, farkl\u0131 bile\u015fenlerin ayn\u0131 veri \u00e7ekme mant\u0131\u011f\u0131na, kimlik do\u011frulama kontrol\u00fcne veya kullan\u0131c\u0131 giri\u015fini i\u015fleme \u015fekline ihtiyac\u0131 olabilir. HOC’lar, bu ortak mant\u0131\u011f\u0131 bir kez yaz\u0131p birden fazla bile\u015fene uygulamam\u0131z\u0131 sa\u011flar.<\/p>\n HOC’lar, sar\u0131lm\u0131\u015f bile\u015fene yeni \u00f6zellikler (props) ekleyebilir, mevcut \u00f6zellikleri de\u011fi\u015ftirebilir veya baz\u0131lar\u0131n\u0131 gizleyebilir. Bu, bile\u015fenlerin belirli bir veri kayna\u011f\u0131na veya global bir duruma eri\u015fmesini sa\u011flamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, bir HOC, bir Redux store’dan veri \u00e7ekip bunu bir bile\u015fene HOC’lar, belirli bir i\u015flevselli\u011fin ayr\u0131 bir yerde kaps\u00fcllenmesini sa\u011flar. Bu, bile\u015fenin kendisinin bu i\u015flevselli\u011fin detaylar\u0131n\u0131 bilmesine gerek kalmadan kullan\u0131labilece\u011fi anlam\u0131na gelir. Bu sayede, bile\u015fenler daha odaklanm\u0131\u015f ve daha az karma\u015f\u0131k hale gelir.<\/p>\n HOC’lar, bile\u015fenlerin render d\u00f6ng\u00fcs\u00fcn\u00fc veya ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc etkileyen yan etkileri (\u00f6rne\u011fin, abonelikler, zamanlay\u0131c\u0131lar) y\u00f6netmek i\u00e7in kullan\u0131labilir. Bu, bile\u015fenin kendisinin bu yan etkilerle u\u011fra\u015fmak zorunda kalmamas\u0131n\u0131 sa\u011flar.<\/p>\n * Veri \u00c7ekme:<\/strong> \u015eimdi basit bir HOC \u00f6rne\u011fi ile konuyu daha iyi anlayal\u0131m. Amac\u0131m\u0131z, herhangi bir React bile\u015feninin ne zaman mount edildi\u011fini (olu\u015fturuldu\u011funu) ve ne zaman update edildi\u011fini (g\u00fcncellendi\u011fini) konsola yazd\u0131ran bir HOC olu\u015fturmak.<\/p>\n \u00d6nce, sar\u0131lacak basit bir bile\u015fen tan\u0131mlayal\u0131m:<\/p>\n {message}<\/p>\n <\/div>\n );\n};\n\nexport default MyComponent;<\/code><\/pre>\n \u015eimdi Ve \u015fimdi map<\/code>, filter<\/code>, reduce<\/code>). HOC’lar da ayn\u0131 prensibi bile\u015fenler d\u00fcnyas\u0131na ta\u015f\u0131r.<\/p>\nconst higherOrderComponent = (WrappedComponent) => {\n return class extends React.Component {\n \/\/ Yeni mant\u0131k, durum veya \u00f6zellikler burada eklenebilir\n render() {\n return const higherOrderComponent = (WrappedComponent) => {\n const EnhancedComponent = (props) => {\n \/\/ Yeni mant\u0131k veya \u00f6zellikler burada eklenebilir\n return WrappedComponent<\/code>, HOC taraf\u0131ndan sar\u0131lan orijinal bile\u015fendir. HOC, bu WrappedComponent<\/code>‘i al\u0131r ve genellikle ona ek \u00f6zellikler (props), durum (state) veya davran\u0131\u015flar ekleyerek yeni bir bile\u015fen d\u00f6nd\u00fcr\u00fcr. Bu yeni bile\u015fen, orijinal bile\u015fenin i\u015flevselli\u011fini geni\u015fletir veya de\u011fi\u015ftirir. \u00d6nemli olan, HOC’lar\u0131n orijinal bile\u015feni do\u011frudan de\u011fi\u015ftirmemesi, aksine onu bir kapsay\u0131c\u0131 (wrapper) i\u00e7inde sarmas\u0131 ve yeni bir bile\u015fen \u00fcretmesidir. Bu, yan etkileri \u00f6nleyen ve bile\u015fenlerin saf kalmas\u0131n\u0131 sa\u011flayan “bile\u015fim” (composition) ilkesine uygun bir yakla\u015f\u0131md\u0131r.<\/p>\nNeden HOC’lara \u0130htiya\u00e7 Duyar\u0131z?<\/h3>\n
Mant\u0131k Payla\u015f\u0131m\u0131 (Logic Reusability)<\/h4>\n
\u00d6zellik Ekleme ve Manip\u00fclasyonu (Prop Injection and Manipulation)<\/h4>\n
data<\/code> prop’u olarak iletebilir.<\/p>\nSoyutlama ve Kaps\u00fclleme (Abstraction and Encapsulation)<\/h4>\n
Yan Etkisiz \u0130\u015flemler (Side-Effect Management)<\/h4>\n
\u00d6rnek Kullan\u0131m Senaryolar\u0131:<\/h4>\n
withData(dataSourceUrl)(MyComponent)<\/code> ile bir bile\u015fene d\u0131\u015far\u0131dan veri enjekte etmek.
\n* Kimlik Do\u011frulama\/Yetkilendirme:<\/strong> withAuth(MyComponent)<\/code> ile yaln\u0131zca yetkili kullan\u0131c\u0131lar\u0131n g\u00f6rebilece\u011fi bile\u015fenler olu\u015fturmak.
\n* Stil Y\u00f6netimi:<\/strong> withStyles(MyComponent)<\/code> ile bile\u015fenlere dinamik stil \u00f6zellikleri eklemek (eski CSS-in-JS k\u00fct\u00fcphanelerinde yayg\u0131nd\u0131).
\n* Form Y\u00f6netimi:<\/strong> withFormik(MyComponent)<\/code> gibi k\u00fct\u00fcphanelerle form durumunu ve validasyonunu y\u00f6netmek.
\n* Performans Optimizasyonu:<\/strong> withMemo(MyComponent)<\/code> gibi HOC’lar ile gereksiz yeniden render’lar\u0131 engellemek.<\/p>\n\u0130lk HOC’umuzu Olu\u015fturma:
withLogger<\/code><\/h3>\n\/\/ MyComponent.js\nimport React from 'react';\n\nconst MyComponent = ({ message }) => {\n return (\n MyComponent<\/h3>\n
withLogger<\/code> HOC’umuzu olu\u015ftural\u0131m:<\/p>\n\/\/ withLogger.js\nimport React from 'react';\n\nconst withLogger = (WrappedComponent) => {\n \/\/ HOC'un displayName'ini ayarlamak, hata ay\u0131klama i\u00e7in \u00f6nemlidir.\n \/\/ Bu, React DevTools'ta daha anlaml\u0131 bir isim g\u00f6rmemizi sa\u011flar.\n const componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\n\n class WithLogger extends React.Component {\n componentDidMount() {\n console.log(${componentName}: Bile\u015fen mount edildi.<\/code>);\n }\n\n componentDidUpdate(prevProps, prevState) {\n console.log(${componentName}: Bile\u015fen g\u00fcncellendi.<\/code>);\n \/\/ Opsiyonel: Props de\u011fi\u015fikliklerini loglamak\n \/\/ console.log('\u00d6nceki Props:', prevProps);\n \/\/ console.log('\u015eimdiki Props:', this.props);\n }\n\n componentWillUnmount() {\n console.log(${componentName}: Bile\u015fen unmount edildi.<\/code>);\n }\n\n render() {\n \/\/ Orijinal bile\u015fenin t\u00fcm \u00f6zelliklerini (props) ona iletiyoruz.\n return WithLogger(${componentName})<\/code>;\n\n return WithLogger;\n};\n\nexport default withLogger;<\/code><\/pre>\nMyComponent<\/code>‘i withLogger<\/code> ile sarmalayal\u0131m ve kullanal\u0131m:<\/p>\n\/\/ App.js\nimport React, { useState } from 'react';\nimport MyComponent from '.\/MyComponent';\nimport withLogger from '.\/withLogger';\n\n\/\/ MyComponent'i withLogger HOC'u ile sarmala\nconst MyLoggedComponent = withLogger(MyComponent);\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n return (\n HOC \u00d6rne\u011fi: withLogger<\/h2>\n