React Hook Series
React Hooks Nedir?
Hook ne demek ? Kanca. Kodda bir yerlere kanca atmak. Yani ortak bir takım fonksiyonlara kanca atarak bileşenimizi güç ve yetenek kazandırmak anlamına geliyor. Nasıl güç kazandığına yazının devamından okuyabilirsiniz.
Bu yazıyı 2019 Mart ayında yazmışım. Yazdığım yazıyı tekrar okuduğumda, yazıdan hiçbir şey anlamadım. Bu sebepten yazıyı silip en baştan yazmaya karar verdim.
Hooks Ne olduğunu okumadan önce Hooks oluşturulması arkasında yatan motivasyona ve Nedenleri okumanızı öneririm (React Hooks Neden Çıktı ?)
Aspect Oriented Programming veya Cross-Cut konuları bilirsiniz. Bazı yetenekler vardır ki bu yetenekleri bileşenler ortak şekilde kullanmak ister. Aynı logic/mantık işletilecektir. Peki biz bunu Fonksiyonlara(Yetenekleri) yazsak , bileşenler bunlara kanca atsa nasıl olur. İşte buna Hook denir.
Biraz beyin fırtınası yapalım. React Bileşenlerin nasıl yeteneklere ihtiyacı olabilir.
- State Tutmak (useState)
- Side Efektini Yansıtmak (useEffect)
- Hover (useHover)
- LifeCycle (useDidMount, useDidUpdate)
- Redux Store (useSelector, useDispatch, useStore)
- React Router (useHistory, useLocation, useParams, useRouteMatch)
- Veri Çekme (useFetch)
- Theme (useTheme)
- Bekleme (useWait)
- Ekran Boyutları ( useWindowDimension)
- useReducer, useRef, vb bir çok ortak yetenek düşünebiliriz.
Benim kafamda aşağıdaki resimdekine benzer bir yapı oluşuyor. Bileşenler bu yeteneklere use… ile Hook (Kanca) atıyorlar özetle 😃
Not: Diyebilirsiniz Class Component (Bileşenlerde) kalıtım kullanmadan High Order Function veya Render Props ile Chain yapıları ile bileşenlere bu yetenekleri kazandırabiliyorduk. Doğru uzun zamandır bu yöntemleri kullanıyoruz. Fakat bunun 2 dezavantajı bulunuyor.
- h(g(f(x))) gibi bileşenlerin birbirini sarmalaması kodun okunabilirliğini çok çok azaltıyor ve bir zincir sırası (pipe) şeklinde işletilmesi gerekiyor.
- 2nci olarak x=view olsun örnek olarak f, g ve h sadece yetenek ekleyeceğimiz fonksiyon olması yetmiyor. React yapısından dolayı onlarında bir Bileşen Olması ve render fonksiyonun çağrılması gerekiyor. Halbuki yukarıda bahsettiğim yeteneklerin hiç birisi render(ekrana çizim) ile ilgili değil ama ağaç yapısında içerdiği alt bileşenleri render edebilmek için buna ihtiyaç duyuyor.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
