\n React geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli evrilen bir yap\u0131ya sahip. Y\u0131llar i\u00e7inde bile\u015fen tabanl\u0131 mimarisiyle modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmezi haline gelen React, 2019 y\u0131l\u0131nda tan\u0131t\u0131lan bir \u00f6zellikle adeta ikinci bir devrim ya\u015fad\u0131: React Hooks. Bu makale, React Hooks’un ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve geli\u015ftiricilerin daha temiz, daha anla\u015f\u0131l\u0131r ve daha s\u00fcrd\u00fcr\u00fclebilir kod yazmas\u0131na nas\u0131l olanak tan\u0131d\u0131\u011f\u0131n\u0131 derinlemesine inceleyecek. E\u011fer React’ta durum y\u00f6netimi ve yan etkilerle ba\u015f\u0131n\u0131z dertteyse veya sadece fonksiyonel bile\u015fenlerin g\u00fcc\u00fcn\u00fc tam anlam\u0131yla ke\u015ffetmek istiyorsan\u0131z, do\u011fru yerdesiniz.\n <\/p>\n
\n React, ilk \u00e7\u0131kt\u0131\u011f\u0131 g\u00fcnden itibaren kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in deklaratif (bildirimsel) bir yakla\u015f\u0131m sunarak geli\u015ftiricilerin hayat\u0131n\u0131 kolayla\u015ft\u0131rd\u0131. Ancak zamanla, \u00f6zellikle s\u0131n\u0131f bile\u015fenleri (class components) kullan\u0131larak geli\u015ftirilen daha karma\u015f\u0131k uygulamalarda baz\u0131 zorluklar ortaya \u00e7\u0131kt\u0131. Bu zorluklar, React ekibini ve toplulu\u011fu, fonksiyonel bile\u015fenlerin potansiyelini tam olarak kullanabilecekleri yeni bir \u00e7\u00f6z\u00fcm aray\u0131\u015f\u0131na itti.\n <\/p>\n
\n S\u0131n\u0131f bile\u015fenleri, React’\u0131n ilk zamanlar\u0131ndan beri durum (state) ve ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131 (lifecycle methods) gibi \u00f6nemli \u00f6zelliklere eri\u015fim sa\u011flaman\u0131n tek yoluydu. Ancak bu yakla\u015f\u0131m, beraberinde baz\u0131 karma\u015f\u0131kl\u0131klar\u0131 da getiriyordu. \u00d6rne\u011fin, \n Dahas\u0131, s\u0131n\u0131f bile\u015fenlerinde durum mant\u0131\u011f\u0131 ve yan etkiler (side effects) genellikle farkl\u0131 ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na da\u011f\u0131lm\u0131\u015f durumdayd\u0131. \u00d6rne\u011fin, bir API’den veri \u00e7ekme i\u015flemi hem \n Bir di\u011fer \u00f6nemli sorun ise, bile\u015fenler aras\u0131nda durum bilgisi i\u00e7ermeyen mant\u0131\u011f\u0131 (stateless logic) veya yan etki mant\u0131\u011f\u0131n\u0131 (side effect logic) yeniden kullanman\u0131n zorlu\u011fuydu. HOC’lar (Higher-Order Components – \u00dcst D\u00fczey Bile\u015fenler) ve Render Props gibi kal\u0131plar bu soruna \u00e7\u00f6z\u00fcm sunmaya \u00e7al\u0131\u015fsa da, bunlar da beraberinde “wrapper hell” (sarmal cehennemi) veya i\u00e7 i\u00e7e ge\u00e7mi\u015f bile\u015fen a\u011fa\u00e7lar\u0131 gibi yeni karma\u015f\u0131kl\u0131klar getiriyordu. Bu durum, bile\u015fen a\u011fac\u0131n\u0131n derinli\u011fini art\u0131rarak hata ay\u0131klamay\u0131 zorla\u015ft\u0131rabiliyor ve performans \u00fczerinde olumsuz etkiler yaratabiliyordu.\n <\/p>\n \n \u0130\u015fte tam da bu noktada, React Hooks devreye girdi. Hooks, fonksiyonel bile\u015fenlerin i\u00e7ine durum ve ya\u015fam d\u00f6ng\u00fcs\u00fc \u00f6zelliklerini “kancalaman\u0131za” olanak tan\u0131yan \u00f6zel JavaScript fonksiyonlar\u0131d\u0131r. Bu sayede, s\u0131n\u0131f bile\u015fenlerinin t\u00fcm g\u00fcc\u00fcn\u00fc, fonksiyonel bile\u015fenlerin sadeli\u011fi ve okunabilirli\u011fiyle birle\u015ftirmek m\u00fcmk\u00fcn hale geldi. Hooks ile geli\u015ftiriciler, ilgili mant\u0131\u011f\u0131 tek bir yerde toplayabilir, bile\u015fenler aras\u0131nda kolayca yeniden kullan\u0131labilir mant\u0131k par\u00e7ac\u0131klar\u0131 olu\u015fturabilir ve \n React Hooks d\u00fcnyas\u0131na ad\u0131m atarken kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z ilk ve belki de en temel Hook, \n \n Yukar\u0131daki \u00f6rnekte g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, \n Birden fazla durum de\u011fi\u015fkeni kullanmak da olduk\u00e7a kolayd\u0131r. Her durum de\u011fi\u015fkeni i\u00e7in ayr\u0131 bir \n \n \n Bu \u00f6rnekte, her bir input alan\u0131 kendi \n React uygulamalar\u0131nda, durum g\u00fcncellemeleri veya render i\u015flemleri d\u0131\u015f\u0131ndaki etkile\u015fimlere “yan etkiler” (side effects) denir. Bunlar genellikle veri \u00e7ekme (data fetching), DOM manip\u00fclasyonu, olay dinleyicileri ayarlama veya temizleme, zamanlay\u0131c\u0131lar gibi i\u015flemleri i\u00e7erir. S\u0131n\u0131f bile\u015fenlerinde bu t\u00fcr yan etkiler genellikle \n \n Yukar\u0131daki \u00f6rnekte, \n \n Ba\u011f\u0131ml\u0131l\u0131k dizisini do\u011fru kullanmak, \n Baz\u0131 yan etkiler, bile\u015fen DOM’dan kald\u0131r\u0131ld\u0131\u011f\u0131nda veya bir sonraki yan etki \u00e7al\u0131\u015fmadan \u00f6nce temizlenmesi gereken kaynaklar olu\u015fturur. \u00d6rne\u011fin, bir olay dinleyicisi eklediyseniz, bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda bu dinleyiciyi kald\u0131rman\u0131z gerekir; aksi takdirde haf\u0131za s\u0131z\u0131nt\u0131lar\u0131na yol a\u00e7abilirsiniz. \n Bu \u00f6rnekte, \n \n Bu \u00f6rnekte, \n React Hooks ekosistemi, \n B\u00fcy\u00fck ve karma\u015f\u0131k React uygulamalar\u0131nda, baz\u0131 verilerin (\u00f6rne\u011fin, kullan\u0131c\u0131 kimlik do\u011frulama durumu, tema tercihleri veya dil ayarlar\u0131) bile\u015fen a\u011fac\u0131n\u0131n bir\u00e7ok farkl\u0131 seviyesindeki bile\u015fenler taraf\u0131ndan eri\u015filebilir olmas\u0131 gerekebilir. Bu t\u00fcr verileri her bir bile\u015fenden alt bile\u015fenine manuel olarak prop (\u00f6zellik) olarak ge\u00e7irmeye “prop drilling” (prop delme) denir. Prop drilling, kod tekrar\u0131na yol a\u00e7ar, bile\u015fen a\u011fac\u0131n\u0131 karma\u015f\u0131kla\u015ft\u0131r\u0131r ve bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r.\n <\/p>\n \n React’\u0131n \n \n \n \n \n \n \n React Hooks’un belki de en g\u00fc\u00e7l\u00fc y\u00f6nlerinden biri, geli\u015ftiricilere kendi \u00f6zel Hook’lar\u0131n\u0131 (Custom Hooks) olu\u015fturma yetene\u011fi sunmas\u0131d\u0131r. \u00d6zel Hook’lar, bile\u015fenler aras\u0131nda durum bilgisi i\u00e7ermeyen mant\u0131\u011f\u0131 (stateful logic) yeniden kullanman\u0131n ve payla\u015fman\u0131n harika bir yoludur. Bu, kod tekrar\u0131n\u0131 azalt\u0131r, bile\u015fenlerinizi daha k\u00fc\u00e7\u00fck ve daha odaklanm\u0131\u015f hale getirir ve uygulaman\u0131z\u0131n genel mimarisini iyile\u015ftirir.\n <\/p>\n \n Bir Custom Hook, ad\u0131nda “use” ile ba\u015flayan ve di\u011fer Hook’lar\u0131 ( \n Custom Hooks kullanman\u0131n ba\u015fl\u0131ca faydalar\u0131 \u015funlard\u0131r:\n <\/p>\n \n Basit bir Custom Hook olu\u015fturmak i\u00e7in, “use” ile ba\u015flayan bir fonksiyon tan\u0131mlaman\u0131z ve i\u00e7inde di\u011fer Hook’lar\u0131 kullanman\u0131z yeterlidir. \u0130\u015fte basit bir a\u00e7ma\/kapama (toggle) i\u015flevini y\u00f6neten \n \n \n \n Hooks’u etkin bir \u015fekilde kullanmak i\u00e7in baz\u0131 en iyi pratikleri g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir:\n <\/p>\n \n \u00d6zel Hook’lar, React geli\u015ftiricilerine g\u00fc\u00e7l\u00fc bir soyutlama ve yeniden kullan\u0131labilirlik arac\u0131 sunar. Bu sayede, daha mod\u00fcler, daha bak\u0131m\u0131 kolay ve daha performansl\u0131 uygulamalar geli\u015ftirmek m\u00fcmk\u00fcn hale gelir. Hooks’u do\u011fru bir \u015fekilde anlamak ve en iyi pratiklerle uygulamak, React projelerinizin kalitesini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.\n <\/p>\n \n React Hooks, modern React geli\u015ftirme paradigmalar\u0131n\u0131 k\u00f6kten de\u011fi\u015ftiren, devrim niteli\u011finde bir \u00f6zelliktir. Tan\u0131t\u0131ld\u0131\u011f\u0131 g\u00fcnden bu yana, geli\u015ftiricilerin fonksiyonel bile\u015fenler i\u00e7inde durum y\u00f6netimi ve yan etkileri \u00e7ok daha temiz, okunabilir ve yeniden kullan\u0131labilir bir \u015fekilde ele almas\u0131na olanak tan\u0131m\u0131\u015ft\u0131r. S\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi \n \n React Hooks, React’\u0131n gelece\u011fidir. Yeni geli\u015ftirilen uygulamalar\u0131n neredeyse tamam\u0131 fonksiyonel bile\u015fenler ve Hooks kullan\u0131larak olu\u015fturulmaktad\u0131r. Mevcut s\u0131n\u0131f tabanl\u0131 projeler bile yava\u015f yava\u015f Hooks’a ge\u00e7i\u015f yapmaktad\u0131r, \u00e7\u00fcnk\u00fc sundu\u011fu avantajlar g\u00f6z ard\u0131 edilemez. Hooks, React ekosistemini daha eri\u015filebilir, daha performansl\u0131 ve daha keyifli bir hale getirerek, web geli\u015ftirmenin gelece\u011finde \u00f6nemli bir rol oynamaya devam edecektir. Bu g\u00fc\u00e7l\u00fc arac\u0131 \u00f6\u011frenmek ve projelerinizde uygulamak, \u015f\u00fcphesiz geli\u015ftiricilik kariyerinize b\u00fcy\u00fck katk\u0131 sa\u011flayacakt\u0131r.\n <\/p>\n #React #ReactHooks #WebGeli\u015ftirme #JavaScript #Frontend #Yaz\u0131l\u0131mGeli\u015ftirme<\/p>\nthis<\/code> anahtar kelimesinin JavaScript’teki dinamik ba\u011flam\u0131, bir\u00e7ok geli\u015ftirici i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabiliyordu. Metotlar\u0131 do\u011fru bir \u015fekilde ba\u011flamak (binding) veya ok i\u015flevleri kullanmak, s\u0131k\u00e7a unutulan veya yanl\u0131\u015f yap\u0131lan ad\u0131mlard\u0131. Bu durum, \u00f6zellikle yeni ba\u015flayanlar i\u00e7in React \u00f6\u011frenme e\u011frisini art\u0131r\u0131yordu.\n <\/p>\ncomponentDidMount<\/code> hem de componentDidUpdate<\/code> i\u00e7inde tekrar edebilirken, bir olay dinleyicisini temizleme i\u015flemi componentWillUnmount<\/code> i\u00e7inde yap\u0131l\u0131yordu. Bu durum, birbiriyle ili\u015fkili mant\u0131\u011f\u0131n (\u00f6rne\u011fin, bir kullan\u0131c\u0131n\u0131n konumunu takip eden bir bile\u015fen) kod taban\u0131na da\u011f\u0131lmas\u0131na ve okunabilirli\u011fin azalmas\u0131na neden oluyordu. Geli\u015ftiriciler, ilgili mant\u0131\u011f\u0131 tek bir yerde toplamakta zorlan\u0131yor, bu da kodun bak\u0131m\u0131n\u0131 ve test edilmesini g\u00fc\u00e7le\u015ftiriyordu.\n <\/p>\nthis<\/code> karma\u015fas\u0131ndan kurtulabilirler. Bu, React geli\u015ftirme deneyimini k\u00f6kten de\u011fi\u015ftirerek daha verimli, daha anla\u015f\u0131l\u0131r ve daha keyifli hale getirdi. Hooks’un temel felsefesi, bile\u015fenlerin i\u00e7inde durum, yan etkiler ve di\u011fer React \u00f6zelliklerini kullanabilmek i\u00e7in basit ve do\u011frudan bir yol sunmakt\u0131r. Bu sayede, fonksiyonel bile\u015fenler art\u0131k sadece “stateless” (durumsuz) bile\u015fenler olmaktan \u00e7\u0131k\u0131p, t\u00fcm g\u00fcc\u00fcyle “stateful” (durum sahibi) bile\u015fenler haline gelebilmektedir.\n <\/p>\nuseState ile React’ta Durum Y\u00f6netimini Nas\u0131l Basitle\u015ftiririz?<\/h2>\n
useState<\/code>‘dir. Bu Hook, fonksiyonel bile\u015fenlerimize durum (state) eklememizi sa\u011flar; yani, bile\u015fenin render’lar aras\u0131nda de\u011fi\u015febilen ve kullan\u0131c\u0131 etkile\u015fimlerine veya d\u0131\u015f verilere g\u00f6re g\u00fcncellenebilen verileri saklamas\u0131na olanak tan\u0131r. S\u0131n\u0131f bile\u015fenlerindeki this.state<\/code> ve this.setState<\/code> yap\u0131s\u0131na bir alternatif olarak, useState<\/code> \u00e7ok daha basit ve anla\u015f\u0131l\u0131r bir s\u00f6zdizimi sunar.\n <\/p>\nuseState<\/code>‘in temel kullan\u0131m\u0131 olduk\u00e7a basittir. Bir fonksiyonel bile\u015fenin i\u00e7inde \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, bir dizi d\u00f6nd\u00fcr\u00fcr. Bu dizinin ilk eleman\u0131 mevcut durum de\u011feri, ikinci eleman\u0131 ise bu durumu g\u00fcncelleyecek bir fonksiyondur. useState<\/code>‘e arg\u00fcman olarak verdi\u011finiz de\u011fer ise durumun ba\u015flang\u0131\u00e7 de\u011ferini belirler.\n <\/p>\n\nimport React, { useState } from 'react';\n\nfunction Sayac() {\n \/\/ 'sayi' mevcut durum, 'setSayi' durumu g\u00fcncelleyen fonksiyon\n \/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0\n const [sayi, setSayi] = useState(0);\n\n return (\n <div>\n <p>Saya\u00e7: {sayi}<\/p>\n <button onClick={() => setSayi(sayi + 1)}>Art\u0131r<\/button>\n <button onClick={() => setSayi(sayi - 1)}>Azalt<\/button>\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nsayi<\/code> de\u011fi\u015fkeni bile\u015fenin durumunu tutarken, setSayi<\/code> fonksiyonu bu durumu de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Bu yakla\u015f\u0131m, s\u0131n\u0131f bile\u015fenlerindeki this.setState<\/code>‘e g\u00f6re \u00f6nemli avantajlar sunar. this.setState<\/code> genellikle durumu derinlemesine birle\u015ftirirken (merge), setSayi<\/code> do\u011frudan yeni de\u011feri atar. E\u011fer durumunuz bir nesne ise ve sadece belirli bir \u00f6zelli\u011fini g\u00fcncellemek istiyorsan\u0131z, bunu manuel olarak yapman\u0131z gerekir: setKullanici({ ...kullanici, ad: \"Yeni Ad\" })<\/code>. Bu, durumun nas\u0131l g\u00fcncellendi\u011fi konusunda daha a\u00e7\u0131k ve tahmin edilebilir bir kontrol sa\u011flar.\n <\/p>\nuseState<\/code> \u00e7a\u011fr\u0131s\u0131 yapabilirsiniz. Bu, s\u0131n\u0131f bile\u015fenlerindeki tek bir b\u00fcy\u00fck durum nesnesini y\u00f6netmek yerine, ilgili durum par\u00e7ac\u0131klar\u0131n\u0131 birbirinden ba\u011f\u0131ms\u0131z olarak ele alman\u0131z\u0131 sa\u011flar. Bu mod\u00fcler yakla\u015f\u0131m, kodunuzun daha d\u00fczenli ve anla\u015f\u0131l\u0131r olmas\u0131na yard\u0131mc\u0131 olur.\n <\/p>\n\nimport React, { useState } from 'react';\n\nfunction KullaniciProfili() {\n const [ad, setAd] = useState('Ahmet');\n const [yas, setYas] = useState(30);\n const [aktif, setAktif] = useState(true);\n\n return (\n <div>\n <p>Ad: {ad}<\/p>\n <p>Ya\u015f: {yas}<\/p>\n <p>Durum: {aktif ? 'Aktif' : 'Pasif'}<\/p>\n <button onClick={() => setAd('Mehmet')}>Ad\u0131 De\u011fi\u015ftir<\/button>\n <button onClick={() => setYas(yas + 1)}>Ya\u015f\u0131 Art\u0131r<\/button>\n <button onClick={() => setAktif(!aktif)}>Durumu De\u011fi\u015ftir<\/button>\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nuseState<\/code> ayr\u0131ca, bir \u00f6nceki duruma ba\u011fl\u0131 olarak yeni durumu hesaplaman\u0131z gerekti\u011finde kullan\u0131\u015fl\u0131 olan fonksiyonel g\u00fcncellemeleri de destekler. \u00d6rne\u011fin, bir sayac\u0131 bir \u00f6nceki de\u011ferine g\u00f6re art\u0131rmak i\u00e7in setSayi(prevSayi => prevSayi + 1)<\/code> \u015feklinde bir fonksiyon ge\u00e7irebilirsiniz. Bu, \u00f6zellikle asenkron g\u00fcncellemelerle \u00e7al\u0131\u015f\u0131rken veya birden fazla durum g\u00fcncellemesinin ayn\u0131 anda ger\u00e7ekle\u015fti\u011fi durumlarda olas\u0131 hatalar\u0131 \u00f6nler. Bu yakla\u015f\u0131m, React’\u0131n durum g\u00fcncellemelerini toplu i\u015flemesi (batching) s\u0131ras\u0131nda bile her zaman do\u011fru ve g\u00fcncel duruma eri\u015fmenizi garanti eder.\n <\/p>\nGer\u00e7ek D\u00fcnya Senaryosu: Bir Form Alan\u0131n\u0131n Durumunu Y\u00f6netme<\/h3>\n
useState<\/code>‘in en yayg\u0131n kullan\u0131m alanlar\u0131ndan biri, form giri\u015flerinin durumunu y\u00f6netmektir. Her bir form eleman\u0131 i\u00e7in ayr\u0131 bir durum de\u011fi\u015fkeni tan\u0131mlayarak, kullan\u0131c\u0131n\u0131n girdilerini kolayca takip edebilir ve i\u015fleyebilirsiniz.\n <\/p>\n\nimport React, { useState } from 'react';\n\nfunction KayitFormu() {\n const [kullaniciAdi, setKullaniciAdi] = useState('');\n const [email, setEmail] = useState('');\n const [sifre, setSifre] = useState('');\n\n const handleSubmit = (event) => {\n event.preventDefault(); \/\/ Sayfan\u0131n yeniden y\u00fcklenmesini engelle\n console.log('Kullan\u0131c\u0131 Ad\u0131:', kullaniciAdi);\n console.log('E-posta:', email);\n console.log('\u015eifre:', sifre);\n \/\/ Burada sunucuya veri g\u00f6nderme gibi i\u015flemler yap\u0131labilir\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <div>\n <label htmlFor=\"kullaniciAdi\">Kullan\u0131c\u0131 Ad\u0131:<\/label>\n <input\n type=\"text\"\n id=\"kullaniciAdi\"\n value={kullaniciAdi}\n onChange={(e) => setKullaniciAdi(e.target.value)}\n \/>\n <\/div>\n <div>\n <label htmlFor=\"email\">E-posta:<\/label>\n <input\n type=\"email\"\n id=\"email\"\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n \/>\n <div>\n <label htmlFor=\"sifre\">\u015eifre:<\/label>\n <input\n type=\"password\"\n id=\"sifre\"\n value={sifre}\n onChange={(e) => setSifre(e.target.value)}\n \/>\n <\/div>\n <button type=\"submit\">Kaydol<\/button>\n <\/form>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nuseState<\/code> ile y\u00f6netiliyor. Kullan\u0131c\u0131 her yazd\u0131\u011f\u0131nda, ilgili set<\/code> fonksiyonu \u00e7a\u011fr\u0131larak durum g\u00fcncelleniyor ve input de\u011feri React taraf\u0131ndan kontrol ediliyor. Bu “kontroll\u00fc bile\u015fenler” (controlled components) yakla\u015f\u0131m\u0131, form verilerini y\u00f6netmek i\u00e7in en iyi y\u00f6ntemlerden biridir ve useState<\/code> bu s\u00fcreci olduk\u00e7a basitle\u015ftirir. B\u00f6ylece, kullan\u0131c\u0131 etkile\u015fimlerinden gelen verilerle bile\u015fenin durumunu senkronize tutmak \u00e7ok daha kolay hale gelir.\n <\/p>\nuseEffect ile Yan Etkileri Etkin Bir \u015eekilde Nas\u0131l Y\u00f6netiriz?<\/h2>\n
componentDidMount<\/code>, componentDidUpdate<\/code> ve componentWillUnmount<\/code> gibi ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na da\u011f\u0131lm\u0131\u015f durumdayd\u0131. Bu durum, ilgili mant\u0131\u011f\u0131n farkl\u0131 yerlerde tekrar etmesine ve kodun okunabilirli\u011finin azalmas\u0131na neden oluyordu. \u0130\u015fte useEffect<\/code> Hook’u, bu sorunu \u00e7\u00f6zmek ve yan etkileri fonksiyonel bile\u015fenler i\u00e7inde tek, tutarl\u0131 bir API ile y\u00f6netmek i\u00e7in tasarland\u0131.\n <\/p>\nuseEffect<\/code>, bile\u015fen render edildikten sonra \u00e7al\u0131\u015f\u0131r. Varsay\u0131lan olarak, her render i\u015fleminden sonra (ilk render dahil) \u00e7al\u0131\u015f\u0131r. Ancak, ne zaman \u00e7al\u0131\u015faca\u011f\u0131n\u0131 kontrol etmek i\u00e7in ikinci bir arg\u00fcman olarak bir ba\u011f\u0131ml\u0131l\u0131k dizisi (dependency array) al\u0131r. Bu ba\u011f\u0131ml\u0131l\u0131k dizisi, useEffect<\/code>‘in g\u00fcc\u00fcn\u00fc ve esnekli\u011fini ortaya koyan kritik bir \u00f6zelliktir.\n <\/p>\n\nimport React, { useState, useEffect } from 'react';\n\nfunction DokumanBasligi() {\n const [sayac, setSayac] = useState(0);\n\n useEffect(() => {\n \/\/ Bu kod her render'dan sonra \u00e7al\u0131\u015f\u0131r (sayac de\u011fi\u015fti\u011finde)\n document.title = Saya\u00e7: ${sayac}<\/code>;\n console.log('Dok\u00fcman ba\u015fl\u0131\u011f\u0131 g\u00fcncellendi.');\n }, [sayac]); \/\/ 'sayac' de\u011fi\u015fti\u011finde tekrar \u00e7al\u0131\u015f\n\n return (\n <div>\n <p>Saya\u00e7: {sayac}<\/p>\n <button onClick={() => setSayac(sayac + 1)}>Art\u0131r<\/button>\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nuseEffect<\/code>, sayac<\/code> de\u011feri her de\u011fi\u015fti\u011finde dok\u00fcman ba\u015fl\u0131\u011f\u0131n\u0131 g\u00fcnceller. E\u011fer ba\u011f\u0131ml\u0131l\u0131k dizisini bo\u015f b\u0131rak\u0131rsan\u0131z ([]<\/code>), useEffect<\/code> sadece bile\u015fen ilk kez monte edildi\u011finde (mount) \u00e7al\u0131\u015f\u0131r ve bu, s\u0131n\u0131f bile\u015fenlerindeki componentDidMount<\/code> davran\u0131\u015f\u0131na benzer. E\u011fer ba\u011f\u0131ml\u0131l\u0131k dizisini hi\u00e7 vermezseniz, her render i\u015fleminden sonra \u00e7al\u0131\u015f\u0131r.\n <\/p>\nBa\u011f\u0131ml\u0131l\u0131k Dizisi (Dependency Array) ve \u00d6nemi<\/h3>\n
useEffect<\/code>‘in ikinci arg\u00fcman\u0131 olan ba\u011f\u0131ml\u0131l\u0131k dizisi, Hook’un ne zaman yeniden \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 belirler. Bu dizi, fonksiyonel bile\u015fenin kapsam\u0131ndaki de\u011fi\u015fkenleri i\u00e7erir. React, bir sonraki render’da bu dizideki de\u011ferlerin bir \u00f6nceki render’daki de\u011ferlerle ayn\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. E\u011fer herhangi bir de\u011fer de\u011fi\u015fmi\u015fse, useEffect<\/code> i\u00e7indeki fonksiyon yeniden \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.\n <\/p>\n\n
[]<\/code>):<\/strong> useEffect<\/code> sadece bile\u015fen ilk kez DOM’a eklendi\u011finde (mount edildi\u011finde) \u00e7al\u0131\u015f\u0131r. Bu, s\u0131n\u0131f bile\u015fenlerindeki componentDidMount<\/code>‘a e\u015fde\u011ferdir ve genellikle bir defaya mahsus API \u00e7a\u011fr\u0131lar\u0131 veya olay dinleyicileri kurmak i\u00e7in kullan\u0131l\u0131r.\n <\/li>\nuseEffect<\/code> her render i\u015fleminden sonra \u00e7al\u0131\u015f\u0131r. Bu, genellikle \u00e7ok dikkatli kullan\u0131lmas\u0131 gereken bir durumdur, \u00e7\u00fcnk\u00fc performans sorunlar\u0131na veya sonsuz d\u00f6ng\u00fclere yol a\u00e7abilir.\n <\/li>\n[propA, stateB]<\/code>):<\/strong> useEffect<\/code>, dizideki propA<\/code> veya stateB<\/code> de\u011ferlerinden herhangi biri de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015f\u0131r. Bu, yan etkinin belirli verilere ba\u011f\u0131ml\u0131 oldu\u011fu durumlar i\u00e7in idealdir.\n <\/li>\n<\/ul>\nuseEffect<\/code> ile sonsuz d\u00f6ng\u00fcleri \u00f6nlemenin ve performans sorunlar\u0131ndan ka\u00e7\u0131nman\u0131n anahtar\u0131d\u0131r. \u00d6rne\u011fin, e\u011fer bir useEffect<\/code> i\u00e7inde bir durum g\u00fcncelleyici \u00e7a\u011f\u0131r\u0131yorsan\u0131z ve bu durum g\u00fcncelleyici ba\u011f\u0131ml\u0131l\u0131k dizisinde yer alm\u0131yorsa, sonsuz bir d\u00f6ng\u00fcye girebilirsiniz. React’\u0131n ESLint eklentisi, bu t\u00fcr hatalar\u0131 yakalaman\u0131za yard\u0131mc\u0131 olabilir.\n <\/p>\nTemizleme Fonksiyonu (Cleanup Function) ile Kaynak Y\u00f6netimi<\/h3>\n
useEffect<\/code>, temizleme i\u015flevini bir fonksiyon d\u00f6nd\u00fcrerek sa\u011flar. Bu fonksiyon, bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda veya ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde bir sonraki yan etki \u00e7al\u0131\u015fmadan \u00f6nce \u00e7a\u011fr\u0131l\u0131r.\n <\/p>\n\nimport React, { useState, useEffect } from 'react';\n\nfunction FareKonumuTakibi() {\n const [x, setX] = useState(0);\n const [y, setY] = useState(0);\n\n const logMousePosition = (e) => {\n setX(e.clientX);\n setY(e.clientY);\n };\n\n useEffect(() => {\n console.log('useEffect \u00e7al\u0131\u015ft\u0131');\n window.addEventListener('mousemove', logMousePosition);\n\n \/\/ Temizleme fonksiyonu: bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda veya ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r\n return () => {\n console.log('Bile\u015fen temizleniyor');\n window.removeEventListener('mousemove', logMousePosition);\n };\n }, []); \/\/ Sadece ilk kez mount edildi\u011finde ve unmount edildi\u011finde \u00e7al\u0131\u015f\u0131r\n\n return (\n <div>\n Fare Konumu: X - {x}, Y - {y}\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nmousemove<\/code> olay dinleyicisi sadece bile\u015fen ilk kez y\u00fcklendi\u011finde eklenir ve bile\u015fen DOM’dan kald\u0131r\u0131ld\u0131\u011f\u0131nda temizlenir. Bu, s\u0131n\u0131f bile\u015fenlerindeki componentWillUnmount<\/code> davran\u0131\u015f\u0131na e\u015fde\u011ferdir ve kaynak y\u00f6netimini \u00e7ok daha zarif bir \u015fekilde yapman\u0131z\u0131 sa\u011flar.\n <\/p>\nUygulamal\u0131 \u00d6rnek: Bir API’den Veri \u00c7ekme<\/h3>\n
useEffect<\/code>‘in en yayg\u0131n kullan\u0131m senaryolar\u0131ndan biri, d\u0131\u015f bir API’den veri \u00e7ekmektir. Genellikle, bu i\u015flem bile\u015fen ilk y\u00fcklendi\u011finde yap\u0131l\u0131r ve \u00e7ekilen veriler bile\u015fenin durumunda saklan\u0131r.\n <\/p>\n\nimport React, { useState, useEffect } from 'react';\n\nfunction KullaniciListesi() {\n const [kullanicilar, setKullanicilar] = useState([]);\n const [yukleniyor, setYukleniyor] = useState(true);\n const [hata, setHata] = useState(null);\n\n useEffect(() => {\n const veriCek = async () => {\n try {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/users');\n if (!response.ok) {\n throw new Error(HTTP hata! Durum: ${response.status}<\/code>);\n }\n const data = await response.json();\n setKullanicilar(data);\n } catch (error) {\n setHata(error);\n } finally {\n setYukleniyor(false);\n }\n };\n\n veriCek();\n }, []); \/\/ Sadece ilk kez mount edildi\u011finde \u00e7al\u0131\u015f\u0131r\n\n if (yukleniyor) return <p>Kullan\u0131c\u0131lar y\u00fckleniyor...<\/p>;\n if (hata) return <p>Hata: {hata.message}<\/p>;\n\n return (\n <div>\n <h3>Kullan\u0131c\u0131 Listesi<\/h3>\n <ul>\n {kullanicilar.map((kullanici) => (\n <li key={kullanici.id}>{kullanici.name} ({kullanici.email})<\/li>\n ))}\n <\/ul>\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nuseEffect<\/code> i\u00e7inde bir asenkron fonksiyon tan\u0131mlanarak API’den kullan\u0131c\u0131 verileri \u00e7ekiliyor. yukleniyor<\/code> ve hata<\/code> durumlar\u0131, kullan\u0131c\u0131lara geri bildirim sa\u011flamak i\u00e7in kullan\u0131l\u0131yor. Ba\u011f\u0131ml\u0131l\u0131k dizisinin bo\u015f olmas\u0131 ([]<\/code>), bu veri \u00e7ekme i\u015fleminin sadece bile\u015fen ilk y\u00fcklendi\u011finde bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu sayede, gereksiz API \u00e7a\u011fr\u0131lar\u0131 \u00f6nlenir ve uygulaman\u0131n performans\u0131 art\u0131r\u0131l\u0131r. useEffect<\/code>, yan etkileri y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc, esnek ve okunabilir bir yol sunarak fonksiyonel bile\u015fenlerin kapsam\u0131n\u0131 ve yeteneklerini \u00f6nemli \u00f6l\u00e7\u00fcde geni\u015fletir.\n <\/p>\n\u0130leri D\u00fczey Hooks: useContext, useRef ve useReducer’\u0131n G\u00fcc\u00fc<\/h2>\n
useState<\/code> ve useEffect<\/code> ile s\u0131n\u0131rl\u0131 de\u011fildir. Daha karma\u015f\u0131k senaryolar\u0131 y\u00f6netmek i\u00e7in tasarlanm\u0131\u015f ba\u015fka g\u00fc\u00e7l\u00fc Hook’lar da bulunur. Bu b\u00f6l\u00fcmde, useContext<\/code>, useRef<\/code> ve useReducer<\/code> gibi ileri d\u00fczey Hook’lar\u0131 inceleyece\u011fiz ve bunlar\u0131n React uygulamalar\u0131n\u0131zda nas\u0131l de\u011fer katabilece\u011fini g\u00f6rece\u011fiz.\n <\/p>\nuseContext: Prop Drilling Sorununa Zarif Bir \u00c7\u00f6z\u00fcm<\/h3>\n
Context API<\/code>‘si, bu soruna bir \u00e7\u00f6z\u00fcm sunar ve useContext<\/code> Hook’u, fonksiyonel bile\u015fenlerin bu ba\u011flam (context) de\u011ferine kolayca eri\u015fmesini sa\u011flar. \u0130lk olarak, createContext<\/code> ile bir ba\u011flam olu\u015fturur ve ard\u0131ndan Provider<\/code> bile\u015feni ile bu ba\u011flam\u0131 bile\u015fen a\u011fac\u0131n\u0131n belirli bir k\u0131sm\u0131na sa\u011flar\u0131z. Son olarak, herhangi bir alt bile\u015fende useContext<\/code> Hook’unu kullanarak bu ba\u011flamdaki de\u011fere do\u011frudan eri\u015febiliriz.\n <\/p>\n\nimport React, { createContext, useContext, useState } from 'react';\n\n\/\/ 1. Tema ba\u011flam\u0131 olu\u015ftur\nconst TemaBaglami = createContext(null);\n\n\/\/ 2. Tema sa\u011flay\u0131c\u0131 bile\u015feni\nfunction TemaSaglayici({ children }) {\n const [tema, setTema] = useState('light'); \/\/ 'light' veya 'dark'\n\n const temaDegistir = () => {\n setTema(oncekiTema => (oncekiTema === 'light' ? 'dark' : 'light'));\n };\n\n return (\n <TemaBaglami.Provider value={{ tema, temaDegistir }}>\n {children}\n <\/TemaBaglami.Provider>\n );\n}\n\n\/\/ 3. Ba\u011flam\u0131 kullanan bir bile\u015fen\nfunction TemaButonu() {\n const { tema, temaDegistir } = useContext(TemaBaglami);\n\n return (\n <button onClick={temaDegistir} style={{ background: tema === 'dark' ? '#333' : '#eee', color: tema === 'dark' ? '#eee' : '#333' }}>\n Temay\u0131 De\u011fi\u015ftir ({tema})\n <\/button>\n );\n}\n\n\/\/ Uygulama\nfunction Uygulama() {\n return (\n <TemaSaglayici>\n <div>\n <h3>Uygulama Temas\u0131<\/h3>\n <TemaButonu \/>\n <p>Bu paragraf da temadan etkilenebilir.<\/p>\n <\/div>\n <\/TemaSaglayici>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nuseContext<\/code>, \u00f6zellikle global veya yar\u0131-global durumlar\u0131 y\u00f6netmek i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r. Prop drilling’i ortadan kald\u0131rarak kodunuzu daha temiz ve okunabilir hale getirir.\n <\/p>\nuseRef: DOM Elemanlar\u0131na Eri\u015fim ve De\u011fi\u015fken Referanslar<\/h3>\n
useRef<\/code> Hook’u, bile\u015fenlerinizde de\u011fi\u015ftirilebilir (mutable) bir referans tutman\u0131z\u0131 sa\u011flar. En yayg\u0131n kullan\u0131m\u0131, bir DOM eleman\u0131na do\u011frudan eri\u015fmektir. \u00d6rne\u011fin, bir input alan\u0131na odaklanmak (focus) veya bir video oynat\u0131c\u0131s\u0131n\u0131 kontrol etmek isteyebilirsiniz. useRef<\/code>, bir nesne d\u00f6nd\u00fcr\u00fcr ve bu nesnenin .current<\/code> \u00f6zelli\u011fi, referans verilen de\u011feri tutar. Bu de\u011fer, bile\u015fenin yeniden render edilmesi durumunda bile de\u011fi\u015fmeden kal\u0131r.\n <\/p>\n\nimport React, { useRef, useEffect } from 'react';\n\nfunction OdaklanmaInputu() {\n const inputRef = useRef(null);\n\n useEffect(() => {\n \/\/ Bile\u015fen y\u00fcklendi\u011finde input'a odaklan\n inputRef.current.focus();\n }, []);\n\n return (\n <div>\n <input type=\"text\" ref={inputRef} \/>\n <button onClick={() => inputRef.current.focus()}>Odaklan<\/button>\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nuseRef<\/code> sadece DOM referanslar\u0131 i\u00e7in de\u011fil, ayn\u0131 zamanda render’lar aras\u0131nda de\u011fi\u015fmeden kalmas\u0131 gereken herhangi bir de\u011feri saklamak i\u00e7in de kullan\u0131labilir. \u00d6rne\u011fin, bir zamanlay\u0131c\u0131 ID’si veya bir \u00f6nceki prop de\u011feri gibi. Bu de\u011ferler g\u00fcncellendi\u011finde bile bile\u015fenin yeniden render edilmesini tetiklemez, bu da performans a\u00e7\u0131s\u0131ndan avantaj sa\u011flayabilir.\n <\/p>\nuseReducer: Karma\u015f\u0131k Durum Mant\u0131\u011f\u0131 \u0130\u00e7in G\u00fc\u00e7l\u00fc Bir Alternatif<\/h3>\n
useState<\/code> basit durum y\u00f6netimi i\u00e7in harika olsa da, daha karma\u015f\u0131k durum mant\u0131\u011f\u0131na sahip uygulamalarda veya birden fazla durum g\u00fcncellemesinin birbiriyle ili\u015fkili oldu\u011fu durumlarda yetersiz kalabilir. \u0130\u015fte bu noktada useReducer<\/code> devreye girer. useReducer<\/code>, Redux gibi durum y\u00f6netim k\u00fct\u00fcphanelerine benzer bir desen sunar: bir “reducer” fonksiyonu ve bir “dispatch” fonksiyonu.\n <\/p>\nuseReducer<\/code>, useState<\/code>‘e bir alternatif olarak, durum mant\u0131\u011f\u0131n\u0131 bile\u015fenden ay\u0131rman\u0131za ve daha \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde y\u00f6netmenize olanak tan\u0131r. Genellikle, durumun g\u00fcncellenme \u015fekli mevcut durum ve bir “action” (eylem) nesnesine ba\u011fl\u0131 oldu\u011funda tercih edilir.\n <\/p>\n\nimport React, { useReducer } from 'react';\n\n\/\/ Reducer fonksiyonu: mevcut durumu ve bir eylemi al\u0131r, yeni durumu d\u00f6nd\u00fcr\u00fcr\nconst gorevReducer = (state, action) => {\n switch (action.type) {\n case 'EKLE':\n return [...state, { id: Date.now(), metin: action.payload, tamamlandi: false }];\n case 'TOGGLE':\n return state.map(gorev =>\n gorev.id === action.payload ? { ...gorev, tamamlandi: !gorev.tamamlandi } : gorev\n );\n case 'SIL':\n return state.filter(gorev => gorev.id !== action.payload);\n default:\n return state;\n }\n};\n\nfunction GorevListesi() {\n \/\/ useReducer, reducer fonksiyonunu ve ba\u015flang\u0131\u00e7 durumunu al\u0131r\n \/\/ Bir dizi d\u00f6nd\u00fcr\u00fcr: mevcut durum ve dispatch fonksiyonu\n const [gorevler, dispatch] = useReducer(gorevReducer, []);\n const [yeniGorevMetni, setYeniGorevMetni] = useState('');\n\n const handleEkle = (e) => {\n e.preventDefault();\n if (yeniGorevMetni.trim()) {\n dispatch({ type: 'EKLE', payload: yeniGorevMetni });\n setYeniGorevMetni('');\n }\n };\n\n return (\n <div>\n <h3>G\u00f6rev Listesi<\/h3>\n <form onSubmit={handleEkle}>\n <input\n type=\"text\"\n value={yeniGorevMetni}\n onChange={(e) => setYeniGorevMetni(e.target.value)}\n placeholder=\"Yeni g\u00f6rev ekle...\"\n \/>\n <button type=\"submit\">Ekle<\/button>\n <\/form>\n <ul>\n {gorevler.map((gorev) => (\n <li key={gorev.id} style={{ textDecoration: gorev.tamamlandi ? 'line-through' : 'none' }}>\n <span onClick={() => dispatch({ type: 'TOGGLE', payload: gorev.id })}>\n {gorev.metin}\n <\/span>\n <button onClick={() => dispatch({ type: 'SIL', payload: gorev.id })}>Sil<\/button>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nuseReducer<\/code>, \u00f6zellikle durumun birden fazla alt de\u011fere sahip oldu\u011fu ve bu de\u011ferlerin karma\u015f\u0131k bir \u015fekilde g\u00fcncellendi\u011fi durumlarda veya durum g\u00fcncelleme mant\u0131\u011f\u0131n\u0131 test edilebilir ayr\u0131 bir fonksiyonda tutmak istedi\u011finizde \u00e7ok faydal\u0131d\u0131r. Bu, kodunuzu daha mod\u00fcler, daha okunabilir ve daha kolay test edilebilir hale getirir. Bu \u00fc\u00e7 Hook, useContext<\/code>, useRef<\/code> ve useReducer<\/code>, React’\u0131n fonksiyonel bile\u015fenlerinin yeteneklerini geni\u015fleterek, daha \u00f6nce sadece s\u0131n\u0131f bile\u015fenleri veya harici k\u00fct\u00fcphanelerle m\u00fcmk\u00fcn olan karma\u015f\u0131k senaryolar\u0131 yerel olarak y\u00f6netmenizi sa\u011flar.\n <\/p>\nKendi \u00d6zel Hook’lar\u0131n\u0131z\u0131 (Custom Hooks) Olu\u015fturma ve Uygulama Geli\u015ftirmede En \u0130yi Pratikler<\/h2>\n
Custom Hooks Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h3>\n
useState<\/code>, useEffect<\/code> vb.) \u00e7a\u011f\u0131rabilen bir JavaScript fonksiyonudur. Temel amac\u0131, bir bile\u015fenin karma\u015f\u0131k mant\u0131\u011f\u0131n\u0131 soyutlamak ve bu mant\u0131\u011f\u0131 birden fazla bile\u015fen aras\u0131nda payla\u015f\u0131labilir hale getirmektir. \u00d6rne\u011fin, bir API’den veri \u00e7ekme, form do\u011frulama, yerel depolama (localStorage) ile etkile\u015fim veya pencere boyutunu izleme gibi i\u015flevleri bir Custom Hook i\u00e7inde toplayabilirsiniz.\n <\/p>\n\n
Bir Custom Hook Olu\u015fturma Ad\u0131mlar\u0131: useToggle \u00d6rne\u011fi<\/h3>\n
useToggle<\/code> Hook’u:\n <\/p>\n\nimport { useState, useCallback } from 'react';\n\nfunction useToggle(initialState = false) {\n const [state, setState] = useState(initialState);\n\n \/\/ useCallback kullanarak toggle fonksiyonunun gereksiz yere yeniden olu\u015fturulmas\u0131n\u0131 engelleriz\n const toggle = useCallback(() => setState(prev => !prev), []);\n\n return [state, toggle];\n}\n\n\/\/ Bu Hook'u kullanan bir bile\u015fen\nfunction AyarButonu() {\n const [acik, toggleAcik] = useToggle(false);\n\n return (\n <div>\n <p>Durum: {acik ? 'A\u00e7\u0131k' : 'Kapal\u0131'}<\/p>\n <button onClick={toggleAcik}>De\u011fi\u015ftir<\/button>\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nuseToggle<\/code> Hook’u, bir boolean durumu ve bu durumu de\u011fi\u015ftiren bir fonksiyon d\u00f6nd\u00fcr\u00fcr. Art\u0131k bu mant\u0131\u011f\u0131 istedi\u011finiz kadar bile\u015fende yeniden kullanabilirsiniz.\n <\/p>\nGer\u00e7ek D\u00fcnya Senaryosu: useLocalStorage Hook’u<\/h3>\n
localStorage<\/code> ile etkile\u015fim, bir\u00e7ok web uygulamas\u0131nda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir gereksinimdir. Bu mant\u0131\u011f\u0131 bir Custom Hook i\u00e7ine almak, kodunuzu \u00e7ok daha temiz ve kullan\u0131\u015fl\u0131 hale getirir.\n <\/p>\n\nimport { useState, useEffect } from 'react';\n\nfunction useLocalStorage(key, initialValue) {\n \/\/ Durumu localStorage'dan veya ba\u015flang\u0131\u00e7 de\u011ferinden al\n const [storedValue, setStoredValue] = useState(() => {\n try {\n const item = window.localStorage.getItem(key);\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n console.warn(Error reading localStorage key \u201c${key}\u201d:<\/code>, error);\n return initialValue;\n }\n });\n\n \/\/ storedValue de\u011fi\u015fti\u011finde localStorage'\u0131 g\u00fcncelle\n useEffect(() => {\n try {\n window.localStorage.setItem(key, JSON.stringify(storedValue));\n } catch (error) {\n console.warn(Error setting localStorage key \u201c${key}\u201d:<\/code>, error);\n }\n }, [key, storedValue]); \/\/ key veya storedValue de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\n\n return [storedValue, setStoredValue];\n}\n\n\/\/ Bu Hook'u kullanan bir bile\u015fen\nfunction KullaniciAyarlari() {\n const [isim, setIsim] = useLocalStorage('kullaniciIsim', 'Misafir');\n const [tema, setTema] = useLocalStorage('uygulamaTema', 'light');\n\n return (\n <div>\n <h3>Kullan\u0131c\u0131 Ayarlar\u0131<\/h3>\n <p>\u0130sim: {isim}<\/p>\n <input type=\"text\" value={isim} onChange={(e) => setIsim(e.target.value)} \/>\n <p>Tema: {tema}<\/p>\n <button onClick={() => setTema(tema === 'light' ? 'dark' : 'light')}>\n Temay\u0131 De\u011fi\u015ftir\n <\/button>\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\nuseLocalStorage<\/code> Hook’u, bir anahtar ve ba\u015flang\u0131\u00e7 de\u011feri al\u0131r, ard\u0131ndan localStorage<\/code>‘dan de\u011feri okur veya kaydeder. Bu, kullan\u0131c\u0131 tercihlerini veya di\u011fer verileri taray\u0131c\u0131da kal\u0131c\u0131 hale getirmenin temiz ve yeniden kullan\u0131labilir bir yoludur.\n <\/p>\nReact Hooks ile En \u0130yi Pratikler<\/h3>\n
\n
useEffect<\/code>, useCallback<\/code> ve useMemo<\/code> gibi Hook’larda ba\u011f\u0131ml\u0131l\u0131k dizilerini eksiksiz ve do\u011fru bir \u015fekilde belirtmek \u00e7ok \u00f6nemlidir. Yanl\u0131\u015f ba\u011f\u0131ml\u0131l\u0131klar sonsuz d\u00f6ng\u00fclere, gereksiz yeniden render’lara veya eski de\u011ferlerin kullan\u0131lmas\u0131na neden olabilir. React’\u0131n ESLint eklentisi (eslint-plugin-react-hooks<\/code>), bu hatalar\u0131 tespit etmede b\u00fcy\u00fck yard\u0131mc\u0131d\u0131r.\n <\/li>\nuseCallback<\/code> ve useMemo<\/code> ile Performans Optimizasyonu:<\/strong> Fonksiyonlar ve hesaplanm\u0131\u015f de\u011ferler her render’da yeniden olu\u015fturulur. E\u011fer bu fonksiyonlar veya de\u011ferler pahal\u0131 i\u015flemlerse veya alt bile\u015fenlere prop olarak ge\u00e7iliyorsa, useCallback<\/code> (fonksiyonlar i\u00e7in) ve useMemo<\/code> (de\u011ferler i\u00e7in) kullanarak bunlar\u0131 \u00f6nbelle\u011fe alabilirsiniz. Bu, gereksiz yeniden render’lar\u0131 \u00f6nleyerek performans\u0131 art\u0131rabilir. Ancak, bunlar\u0131 her yerde kullanmak yerine, sadece performans sorunu g\u00f6rd\u00fc\u011f\u00fcn\u00fcz veya alt bile\u015fenlerin gereksiz yere yeniden render olmas\u0131n\u0131 engellemek istedi\u011finiz durumlarda kullanmal\u0131s\u0131n\u0131z.\n <\/li>\nuseRef<\/code> ile DOM elemanlar\u0131na odaklanma veya ARIA niteliklerini dinamik olarak y\u00f6netme gibi durumlarda eri\u015filebilirlik etkilerini d\u00fc\u015f\u00fcn\u00fcn.\n <\/li>\n<\/ul>\nSonu\u00e7: React Hooks ile Gelece\u011fe Y\u00f6nelik Geli\u015fim ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
this<\/code> karma\u015fas\u0131, ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131n da\u011f\u0131n\u0131kl\u0131\u011f\u0131 ve mant\u0131k payla\u015f\u0131m\u0131n\u0131n zorluklar\u0131, Hooks sayesinde b\u00fcy\u00fck \u00f6l\u00e7\u00fcde ortadan kalkm\u0131\u015ft\u0131r.\n <\/p>\nuseState<\/code> ile basit durum y\u00f6netiminden, useEffect<\/code> ile yan etkilerin kontrol\u00fcne, useContext<\/code> ile prop drilling’i a\u015fmaya ve useReducer<\/code> ile karma\u015f\u0131k durum mant\u0131\u011f\u0131n\u0131 y\u00f6netmeye kadar, Hooks yelpazesi geni\u015f bir ihtiyac\u0131 kar\u015f\u0131lar. Dahas\u0131, kendi \u00f6zel Hook’lar\u0131n\u0131z\u0131 olu\u015fturma yetene\u011fi, React’\u0131n mod\u00fclerli\u011fini ve yeniden kullan\u0131labilirli\u011fini zirveye ta\u015f\u0131r. Bu sayede, geli\u015ftiriciler sadece daha az kod yazmakla kalmaz, ayn\u0131 zamanda daha anlaml\u0131, daha odaklanm\u0131\u015f ve daha s\u00fcrd\u00fcr\u00fclebilir kod tabanlar\u0131 olu\u015fturabilirler.\n <\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
useCallback<\/code> ve useMemo<\/code> gibi optimizasyon Hook’lar\u0131 ile performans\u0131 daha da art\u0131rabilirsiniz. Performans sorunlar\u0131 genellikle Hook’lar\u0131n yanl\u0131\u015f ba\u011f\u0131ml\u0131l\u0131k dizileriyle veya gereksiz yere \u00e7ok s\u0131k \u00e7al\u0131\u015facak \u015fekilde kullan\u0131lmas\u0131yla ortaya \u00e7\u0131kar, bu da geli\u015ftirici hatas\u0131ndan kaynaklan\u0131r.<\/dd>\nuseSelector<\/code> ve useDispatch<\/code> Hook’lar\u0131n\u0131 sunar. Bu Hook’lar, Redux store’una eri\u015fimi ve eylemleri g\u00f6ndermeyi \u00e7ok daha basit ve do\u011frudan hale getirir, b\u00f6ylece Redux’u fonksiyonel bile\u015fenlerle sorunsuz bir \u015fekilde entegre edebilirsiniz.<\/dd>\n