React Hooks Nedir?

1. React Hooks Nedir?

2. React Hooks Neden Geliştirildi?

   2.1 React İçerisinde Ne Tür Bileşenler Bulunuyor ?

   2.2 Class Component ile ilgili Sorun Nedir ?

3. useState Nedir?

4. useEffect Nedir?

   4.1 Nedir?

   4.2 useEffect İçerisinden State Güncellenirse

   4.3 useEffect İçerisinde SideEffect Bağımlılıklarını Temizlemek

   4.4 useEffect ile farklı props bağımlılıklarını ve bunların side effectlerini yönetmek

5. useContext Nedir?

6. useReducer Nedir?

7. useCallback Nedir?

8. useMemo Nedir?

9. useRef Nedir?

10. useImperativeHandle Nedir?

11. useLayoutEffect Nedir?

12. useDebugValue Nedir?

1. 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.

Aspect Oriented Programming veya Cross-Cut konularına aşinaysanız, bu kavramlar size yabancı gelmeyecektir belkide. Bazı yetenekler bileşenler tarafından ortak bir şekilde kullanılma ihtiyacı olur. Burada ortak yeteneğin kod mantığının paylaşımında 4 farklı yöntem bulunur.

• Inheritance
• High Order Component
• Render Props
• Hooks

Kod paylaşımında Inheritance mantığının UI yapıları için uygun olmadığını daha çok Model yapıları için daha uygun olduğunu düşünebilirsiniz.

Bundan dolayı kod paylaşımında UI için 3 mantıklı yöntem bulunuyor. Bunlar HoC , Render Props ve Hooks lar bulunuyor. Bu yöntemlerin birbirlerine göre avantaj ve dezavantajları bulunuyor. İlerleyen konularda bunlara değiniyor olacağım

https://www.dotconferences.com/2019/12/evan-you-state-of-components  (UI Components Works)

Ortak kod dediğimiz measurable, themeable, filterable gibi ortak kodların oluyor olması. Peki aynı algoritma aynı iş mantığı işletilecektir, biz geliştiriciler bunu Fonksiyonlara(Yetenekleri) yazsak , bileşenler bunlara kanca atsa ve kullansa nasıl olur?

Not: Hemen birileri çıkıp Util JS yazıp, içerisinden fonksiyon çağırmaktan ne farkı var diye düşünebilir. ve ileride göreceğimiz üzerine burada üzerinde çalıştığımız kısımlar sadece kod değil biz aynı zamanda React’ın bize sağladığı API’leri View oluşturmak için bu fonksiyonlar içerisinde kullanmamız gerekiyor.

React da bileşenlerinin daha light-weight(hafif) fonksiyon bileşenler olarak geliştirilmesi düşüncesi var. Yeri gelince de ihtiyacı duyduğu kütüphanelerden faydalanmak için use yani ilgili fonksiyonu kullanacağı kancayı attığınız yapıları kullanmaya istiyorlar.

Biraz beyin fırtınası yapalım. React Geliştireceğimiz UI Bileşenlerin nasıl yeteneklere ihtiyacı olabilir.

• State Tutmak (useState)
• Side Efektini Yansıtmak (useEffect)
• Hover (useHover)
• LifeCycle (, useDidUpdate) useDidMount
• 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.

Not: Diyebilirsiniz Class Component (Bileşenlerde) kalıtım kullanmadan High Order Function veya Render Props ile, Chain yöntemleri 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 sarmalı kodun okunabilirliğini çok fazla 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ılabilmesi 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.

E-Kitabın devamını site üyeleri Download düğmesine basarak pdf olarak indirip okuyabilirler.