React Hooks, React uygulamalarında state ve lifecycle metodlarına yönelik işlemleri gerçekleştirmek için kullanılan fonksiyonlardır useState Hook'u, bileşenlerde state yönetimi için kullanılırken, useEffect Hook'u component mount edildiğinde veya güncellendiğinde çalışan bir fonksiyondur React Hooks'un kullanımı sayesinde React uygulamalarının geliştirilmesi daha hızlı ve daha etkili bir şekilde gerçekleştirilebilir Bu nedenle Hooks'ların, React geliştiricileri tarafından aktif bir şekilde kullanılması önerilir
React Hooks, React uygulamalarında state ve lifecycle metodlarına yönelik işlemleri gerçekleştirmek için kullanılabilecek fonksiyonlardır. Bu fonksiyonlar, uygun şekilde kullanıldığında React uygulamalarının geliştirilmesinde büyük bir kolaylık sağlamaktadır.
React Hooks'un temel amacı, React uygulamalarının düzenli bir şekilde güncellenmesi için gerekli olan state ve lifecycle metodları işlemlerini daha kolay bir hale getirmektir. Özellikle class componentlerde işlemlerin daha fazla kod yazmayı gerektirmesi nedeniyle Hooks'un kullanımı oldukça tercih edilir hale gelmiştir.
- useState: Component'in state değerlerini tanımlamak ve değiştirmek için kullanılır.
- useEffect: Component'in lifecycle metodlarını kullanmak için geliştirilmiştir.
- useContext: Componentler arasında state değerlerini paylaşmak için kullanılır.
- useReducer: State yönetimi için kullanılır ve useState yerine tercih edilebilir.
- Custom Hooks: Özelleştirilmiş fonksiyonlar oluşturmak için kullanılır ve Hooks gibi çalışır.
Tüm bu Hooks'lar, React uygulamalarının daha hızlı ve daha etkili bir şekilde geliştirilmesine olanak tanıyan yapılardır. Bu nedenle Hooks'ların, React geliştiricileri tarafından kullanılması oldukça önerilir.
| useState | useEffect | useContext | useReducer |
|---|---|---|---|
| State yönetimi | Lifecycle metodları | State paylaşımı | Daha karmaşık state yönetimi |
| Farklı state değerleri için kullanılır | Component monte edilme - update - unmount işlemleri içindir | Farklı componentler arasında state değerleri paylaşmak için kullanılır | Farklı state değerlerini yönetmek için kullanılır |
useState Hook'u
React Hooks ile gelen en temel Hook'lardan biri useState Hook'dur. Bu Hook, React bileşenlerinde state değerlerini yönetmek için kullanılır. useState Hook'u, fonksiyonel bileşenlerde state kullanılmasını sağlar ve bu sayede sınıf bileşenleri kullanılmadan bile bileşenlerimiz için state yönetimi yapabiliriz.
Bir örnek kullanımına geçmeden önce, useState Hook'unun nasıl çalıştığına bir göz atalım. Kullanımı oldukça basittir, sadece useState fonksiyonunu kullanarak bir state değeri oluşturabiliriz. Bu fonksiyon bize bir tuple döndürecektir, ilk eleman state değeri, ikinci eleman ise bu değeri güncelleyebileceğimiz bir fonksiyondur.
| useState Hook Kullanımı |
|---|
| const [count, setCount] = useState(0); |
Yukarıdaki örnekte, count state değerimiz başlangıçta 0 olarak tanımlanmıştır. setCount ise count'u güncellemek için kullanılacak olan fonksiyondur. Bu fonksiyon, count state değerine yeni bir değer atar ve bileşenimizin tekrar render edilmesini sağlar.
Örneğin, bir sayaç bileşeni oluşturmak istiyorsak useState Hook'u kullanabiliriz:
| Sayaç Bileşeni Örneği |
|---|
| import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Sayaç Değeri:{count}</p> <button onClick={() => setCount(count + 1)}>Artır</button> </div> ); } |
Yukarıdaki örnek bileşeni kullanarak, artır butonuna tıklandığında sayaç değerimiz her seferinde bir artacaktır. Bu basit örnek, useState Hook'unun nasıl kullanılacağına dair fikir edinmemizi sağlamıştır.
useEffect Hook'u
React Hooks, React uygulamalarında daha temiz ve okunaklı kod yazmayı sağlayan bir yapıdır. Hooks, class component'lerde kullanılan state ve lifecycle yönetimi gibi işlevleri düzenleyen fonksiyonlar olarak tanımlanabilir. useEffect Hook'u, React'ta en çok kullanılan Hooks'lardan biridir.
useEffect Hook'u, component mount edildiğinde veya component'e props veya state'leri güncellendiğinde çalışan bir fonksiyondur. Bu Hook, class component'lerdeki componentDidMount, componentDidUpdate ve componentWillUnmount lifecycle fonksiyonlarının yerini almaktadır. useEffect Hook'u, component'in render'ından sonra çalışır ve component'i yeniden render etmez.
| useEffect Hook'u |
|---|
| useEffect(() => { // burada işlemler yapabilirsiniz }); |
| Bu, component mount edildiğinde ve güncellendiğinde çalışacak bir useEffect Hook'unun en temel hali. Bu fonksiyon içinde yer alan işlemler, component'in ilk render'ından sonra ve sonraki her güncellemeden sonra çalışacaktır. |
Bir örnek kullanım ise şu şekildedir:
| useEffect Hook'u |
|---|
| import React, { useEffect, useState } from 'react'; function Component() { const [count, setCount] = useState(0); useEffect(() => { document.title = 'Count: ' + count; console.log('Component güncellendi!'); }); return ( Count: {count} ); } export default Component; |
| Bu örnekte useEffect Hook'u, document'un title özelliğini değiştirir ve component'in güncellendiğine dair bir log oluşturur. Herhangi bir state değeri değiştiğinde, useEffect Hook'u çalışacaktır. |
useEffect vs componentDidMount
useEffect ve componentDidMount, React'da yaşam döngüsü methodlarıdır. ComponentDidMount, bir bileşen tüm DOM ağacına eklenip render edildikten sonra çağrılır. useEffect, React tarafından sağlanan bir hook'tur ve bileşenin işlevselliğineki etkileri yönetir.
ComponentDidMount, komponentin backend ile etkileşime geçmek için en iyi yerdir. Bu yöntem, AJAX çağrıları yapmak, Firebase'den veri almak gibi işlemler için tipik olarak kullanılır. useEffect, bu işlemler için de kullanılabilir. Bu nedenle, ComponentDidMount ve useEffect arasındaki farklar genellikle işlem yaparak bileşen içeriği değiştirme ile ilgilidir.
useEffect, işlemler yapabilir ve bileşenin yeniden yeniden render edilmesine ilişkin normatif olmayan kısıtlamalardan kaçınabilir. useEffect, bileşenin yüklenmesinden hemen sonra bileşenin işlevselliğini etkileyebilir ve bileşen öğesi ile kaynakların boyutunu daraltır.
ComponentDidMount kullanıldığında, bileşenin ilk yüklemesi hemen gerçekleştikten sonra yürütülecek herhangi bir kodu başlatmak için kullanılır. useEffect ile birlikte, bileşenin yüklemesiyle veya bileşenin özelliklerinin ya da durumunun değişmesiyle tetiklenir.
Kullanımları arasındaki farklar, bileşenin içeriğindeki durumun ne zaman gerçekleştiğine bağlıdır. Bu nedenle, kodun kendisi duruma bağlı olarak uygun olan belirli kullanımı kullanmalıdır.
useEffect vs componentDidUpdate
React Hooks'un en önemli Hook'lardan biri useEffect Hook'udur. useEffect Hook'u, React bileşenimizin ömrü boyunca gerçekleşmesi gereken herhangi bir yan etkiyi gerçekleştirmemize izin verir. Ancak, componentDidUpdate metoduna benzer bir yapıda olmasına rağmen, ikisi arasında bazı farklılıklar vardır.
componentDidUpdate, bir bileşen güncellenip tekrar render edildiğinde çalıştırılan bir metod iken, useEffect Hook'u bileşen içindeki bir şeyin değiştiği herhangi bir zamanda tetiklenebilir. İkisi arasındaki en önemli fark, useEffect Hook'unun temizleyiciler kullanarak neredeyse tüm componentDidUpdate işlevlerini gerçekleştirebilmesidir.
useEffect Hook'u ile, bileşenin render edilmesi sonrası işlem yapılabilir ve işlem sonrasında sürekli aynı işlemi tekrar etmek yerine temizleyici işlevler kullanarak silinebilir. componentDidUpdate ile, her yöntem çağrısı, düzenleme işleminin doğru zamanda gerçekleşmesi için gözetilmelidir.
useEffect Hook'u özellikle bileşenlerimizin tarafından kullanılan kaynakları düzgün bir şekilde kontrol etmemize yardımcı olur. Kendi componentwillUnmount işlevlerimizi yazmak yerine useEffect Hook'u ile her şeyi tek bir yerde kontrol edebiliriz.
Bu nedenle, kullanışlılık ve daha az kod yazımı açısından, useEffect Hook'u daima componentDidUpdate metoduna tercih edilir. Ancak, bir bileşenin ihtiyacına bağlı olarak componentDidUpdate hala işe yarayabilir.
useContext Hook'u
useContext Hook'u, React'ta componentler arasında data iletimi yapmak için kullanılan bir Hook'tur. Bu Hook, parent componentten child componentlere props ile veri iletmek yerine, tüm component ağacı boyunca her yere veri iletilmesini sağlar. Bunu yaparken de, veri transit ve prop drilling sorunlarını minimize eder.
Bir örnek kullanım senaryosu şu şekilde olabilir: bir uygulama içerisindeki temayı kontrol etmek istiyoruz. Header, Sidebar ve Content componentlerindeki renkler, tema ayarlarına bağlı olarak değişecek. useContext Hook'u kullanarak bu senaryoyu şu şekilde çözebiliriz:
| Temayı kontrol eden dosya | Header componenti | Sidebar componenti | Content componenti |
|---|---|---|---|
export const ThemeContext = React.createContext('light'); | import React, { useContext } from 'react';import { ThemeContext } | import React, { useContext } from 'react';import { ThemeContext } | import React, { useContext } from 'react';import { ThemeContext } |
Yukarıdaki örnekte ThemeContext adında bir Context oluşturduk. Header, Sidebar ve Content componentlerinde bu Context'i kullanarak, temayı dinamik bir şekilde kontrol edebiliyoruz. Bu sayede, özellikle büyük uygulamalarda veri transit ve prop drilling problemlerinden kaçınarak, kodu daha fazla modüler ve okunaklı hale getirebiliriz.
useReducer Hook'u
React Hooks ile ilgili birçok farklı Hook bulunmaktadır ve bu Hook'lardan biri de useReducer Hook'udur. useReducer Hook'u, useState Hook'unun bir alternatifidir ve daha karmaşık bileşen durumlarını rahat bir şekilde yönetmek için kullanılır.
useReducer Hook'u, bir fonksiyonla birlikte çalışır ve bu fonksiyon, mevcut bileşen durumunu ve eylemi alır ve yeni bir durum döndürür. Bu sayede, useState Hook'u gibi durumu yönetmek için tekrar tekrar fonksiyon çağrıları yapmaktan kurtulursunuz. Bunun yerine, bir eylemle birlikte yeni bir durum döndüren bir fonksiyon yazarsınız.
| Kavram | useState Hook'u | useReducer Hook'u |
|---|---|---|
| Durum | Tek durum | Birden fazla durum |
| Değiştirme | setState() | dispatch() |
| Güncelleme | Yeniden çiz | Yeniden çiz |
Örnek olarak, bir kullanıcının sepetindeki ürün sayısını yöneten bir bileşen düşünelim. useState Hook'unda, her sepet güncellendiğinde yeni bir durum değeri atamamız gerekiyor. Ancak useReducer Hook'u kullanarak, sepet güncellendiğinde sadece güncellenen ürün sayısını elde eden bir fonksiyon yazabiliriz.
- const sepetReducer = (state, action) => {
- switch(action.type) {
- case 'add':
- return state + 1
- case 'remove':
- return state - 1
- default:
- return state
- }
- }
- function Sepet() {
- const [sepet, dispatch] = useReducer(sepetReducer, 0)
- const addProduct = () => {
- dispatch({type: 'add'})
- }
- const removeProduct = () => {
- dispatch({type: 'remove'})
- }
- return (
- {sepet}
- )
- }
Bu örnek, useReducer Hook'unu kullanarak bileşen durumunun yönetilmesinde nasıl yardımcı olabileceğini göstermektedir. Yönetilmesi gereken daha karmaşık durumlar söz konusu olduğunda, useReducer Hook'u useState Hook'undan daha kullanışlı olabilir.
useState vs useReducer
useState ve useReducer, React Hook'larının en temel kullanılan iki Hook'udur. useState, component içindeki state değişkenlerinin tutulmasında kullanılırken, useReducer state değişkenlerinin yönetildiği daha karmaşık senaryolarda kullanılmaktadır. Bu farklılıklar nedeniyle, useState ve useReducer kullanımı arasında bazı farklar bulunmaktadır.
useState, sınıf tabanlı React componentlerindeki setState metoduna benzer şekilde çalışır. useState ile oluşturulan state'ler, bir değişken ve bir fonksiyondan oluşur. Değişken, o anki state değerini tutarken, fonksiyon ise state'e yeni değer atamak için kullanılır. useState ile oluşturulan bir state üzerinde yapılan herhangi bir değişiklik, o componentin yeniden render edilmesine sebep olur.
useReducer, useState'in birden fazla state değişkeni içeren ve daha karmaşık senaryolarda sınıf tabanlı componentlerdeki setState metodunun yerini tutan Hook'tur. useReducer, bir state değişkeni, bir action ve bir de action'ın state değişkenine uygulanacağı bir reducer fonksiyonu kullanır. State değişkeni, useState'deki gibi bir değişken ile tutulur. Ancak action, bir fonksiyondan oluşmaktadır ve state değişkeninin nasıl değiştirileceğini belirlemektedir. Reducer fonksiyonu, action parametresine göre state değişkenin nasıl değiştirileceğini belirtmektedir. useReducer, useState'den farklı olarak, component'in yeniden render edilmesini zorunlu kılmaz.
useState ve useReducer Hook'ları arasındaki farkların özeti şudur:- useState, 1 state değişkeni tutmak için kullanılırken, useReducer birden fazla state değişkenine sahip karmaşık senaryolarda kullanılır.- useState ile işlem yaptığınızda component yeniden render edilirken, useReducer'de bu zorunlu değildir.
useState ve useReducer arasındaki seçim, component'in ihtiyaçlarına göre belirlenmelidir. Eğer component'in sadece birkaç state değişkeni varsa, useState kullanmak daha uygun olacaktır. Ancak component'in birden fazla state değişkenine sahip olduğu ve bu state değişkenlerinin karmaşık bir şekilde birbirleriyle bağlantılı olduğu durumlarda ise useReducer kullanmak daha uygun olacaktır.
Custom Hook'lar
React Hooks, hem kodlama işlemini kolaylaştıran hem de daha okunaklı ve idare edilebilir hale getiren bir yapı olarak öne çıkıyor. Bunlarla birlikte, özellikle daha karmaşık uygulamalar için özel bir özellik olan Custom Hook'lar önemli bir yer tutar.
Custom Hook'lar genellikle, kodun tekrarlanan veya ortak fonksiyonlarını bir yerde depolamak amacıyla tasarlanmıştır. Bunlar, özellikle birden çok bileşen içeren bir uygulamada, aynı kodu tekrar tekrar yazmaktan kaçınmanızı sağlar. Bu, hem kod yazma sürecini hızlandırır, hem de tek bir yere yapılan değişikliklerin diğer bileşenlere de yansıması sayesinde her şeyin düzgün çalıştığından emin olmanızı sağlar.
Custom Hook'lar oluşturmak oldukça kolaydır. Genellikle bir işlevin bir kısmını ayrıştırarak, özellikle birden çok yerde kullanabileceğiniz ortak işlevleri oluşturma fikrine dayanırlar. Bir örnek kullanım için, Ana bileşeninizde bir kullanıcı adı ve parola girişi formu oluşturduğunuzu varsayalım. Bu form uzun olabilir ve beş veya altı alandan oluşabilir. Bu alandan sonra, kullanıcının giriş yapmak için bir "Giriş" düğmesine basması gerekiyor. Daha sonra, giriş doğruysa, localStorage'da token değerlerinin depolanması gerekir. Ayrıca bir hata durumunda hata mesajının negatif panel olarak gösterileceği bir alan da oluşturulabilir.
Birkaç bileşen oluşturmadan önce, bu tür bir formu tek bir dosyada işlemeyi tercih edebilirsiniz. Bütün bu işlemleri içeren bir Custom Hook oluşturabilirsiniz. Bu Hook'u kullanarak, formlarınızda aynı ve kaliteli bir şekilde kullanabilirsiniz. Bu sadece işin tek bir bölümüdür ve diğer işlemler için de benzer bir yöntem uygulanabilir.
Custom Hook'lar hem karmaşıklığı azaltır hem de kodu daha okunaklı ve idare edilebilir hale getirir. Kısacası, React Hooks'un herhangi bir bileşenin açık bir şekilde yönetilmek istenmesi durumunda en iyi pratikleri sunduğunu söyleyebiliriz. Bu nedenle, React kullanıcıları, kod deneyimlerini ve performansını da artırmak için Hooks'un tüm özelliklerini kullanabilirler.
React Hook Kuralları
React Hooks, JavaScript kütüphanesi olan React'ın 16.8 sürümünde tanıtılan bir özelliktir. Bu özellik sayesinde, React'ta daha önce hiç mümkün olmayan işlemler yapılabilmektedir. Ancak, React Hook kullanırken dikkat edilmesi gereken bazı kurallar ve en iyi uygulamalar mevcuttur.
- Hook'ları Sadece Fonksiyonlar İçinde Kullanın: React Hook'larını, React bileşenlerinde sadece fonksiyonlar içinde kullanabilirsiniz. Class bileşenlerinde kullanılamaz.
- Tüm Hook'lar, Fonksiyonun Doğrudan İçinde Kullanılmalıdır: Hook'lar, fonksiyonun en üst düzeyinde, doğrudan tanımlanmalıdır. Örneğin, useEffect, tüm diğer ifadelerden önce kullanılmalıdır.
- Hook'ların İşlevi Zaten Belirlidir: Hook'ların tek bir işlevi vardır. Herhangi bir Hook, kullanım şekli bellidir ve değiştirilemez.
- Özel Kancalarınızı Oluşturun: Bir bileşen içinde belirli bir işlev için kullanılabilecek Hook'lar mevcut değilse, özel bir Hook oluşturabilirsiniz. Bu şekilde, kendi Hook'larınızı oluşturarak kodunuzu daha okunaklı hale getirebilirsiniz.
Bunların yanı sıra, Hook'lar modüler ve güncelleştirilebilir şekilde oluşturulmalıdır. Hook'lar birbirleriyle etkileşim halinde olabilir, ancak bir Hook herhangi bir şekilde diğer bir Hook'a bağımlı değildir. Böylece, gerektiğinde Hook'ları değiştirebilirsiniz.
React Hook kullanıldığında, etkileşimli, verimli ve yeniden kullanılabilir bir uygulama oluşturulabilir. Ancak, Hook'ların nasıl kullanılacağına ve bunlarla ilgili bazı kurallara dikkat edilmelidir. Bu kurallar, kodun temiz ve okunaklı olmasına yardımcı olabilir ve hataların oluşmasını engelleyebilir.