React Hooks, React framework'ü içinde class kullanmadan state ve diğer React fonksiyonelliğini eklemek için kullanılan bir yapıdır useState, state değişkenlerini yönetmek için kullanılır ve setState metoduna benzer şekilde değişiklik yapar useEffect, side-effect'leri tetiklemek için kullanılır ve dependency array ile sadece değişen değerler için işlem yapılmasını sağlar React Hooks, kodun daha okunaklı ve daha az yazılmasını sağlayarak, bileşenler arasında kod paylaşımı ve tekrar kullanılabilen bir yapı oluşturmayı mümkün kılar useState ve useEffect örnek kodlarıyla birlikte React Hook'u öğrenmek kolaydır

React Hooks, React framework'ü içerisinde class kullanılmadan state ve diğer React fonksiyonelliği eklemek için kullanılan bir yapıdır. Özellikle sınıf içerisindeki state yönetimini kolaylaştırması açısından büyük bir fark yaratır. Bu yazıda React Hooks'un ne olduğu, nasıl kullanıldığı ve öğrenilebileceğiyle ilgili tüm detayları ele alacağız. Ayrıca Hooks kullanımına dair örnek kodlar paylaşarak, React Hook'u anlamanıza katkı sağlamaya çalışacağız. Öğrenmeye başlamadan önce, daha önce React ile çalıştıysanız, class dışındaki bileşenleri nasıl yazabileceğinizi öğrenmek isteyebilirsiniz. Eğer bu yönde bir adım atmak istiyorsanız React Hooks sizin için büyük bir fırsat olacaktır.

React Hooks Nedir?

React Hooks, React uygulamalarında state ve diğer fonksiyonellikleri sınıflar kullanmadan eklemek için kullanılan bir kütüphanedir. Bu sayede kodlar daha okunaklı ve daha az yazılır. React Hooks'u kullanarak bileşenler arasında kod paylaşımı yapabilir ve tekrar kullanabilen bir yapı oluşturabilirsiniz.

React Hooks'un sağladığı en önemli özelliklerden biri, kodun daha okunaklı ve daha az yazılır olmasıdır. Özellikle state yönetimi için kullanılan useState Hook'u, sınıfların this.setState() metoduna göre daha basit bir kullanıma sahiptir. UseEffect, useContext ve useReducer gibi diğer React Hooks çözümleri de benzer şekilde, kodun daha iyi bir şekilde organize edilmesini sağlar.

useState Kullanımı

React Hooks'un temel parçalarından biri olan useState, state'i React fonksiyon bileşenlerinde kullanmanızı sağlar. Bu sayede, React sınıfları kullanmadan bileşenlerin state'lerini kontrol etmek daha kolay hale gelir.

useState, değişkenleri ve bunların değerlerini yönetmek için kullanılır. Bu Hook'u kullanmak için, öncelikle useState işlevini çağırmalısınız. Bu işlev, bir dizi döndürür ve bu dizi, state değerinin kendisi ve bu değeri güncellemek için kullanabileceğiniz bir işlev olan setState'i içerir.

Örneğin, aşağıdaki kodda, count adlı bir state değişkeni tanımlanmıştır ve 0 başlangıç değeriyle başlatılmıştır:

  const [count, setCount] = useState(0);

useState ile oluşturulan state, setState'in çağrılmasıyla güncellenebilir. Örneğin, bir sayfa üzerindeki bir butonda kullanıcı tıkladığında, bileşenin state'i güncellenebilir ve bu, bileşenin yeniden render edilmesine ve yeni bir değer göstermesine neden olur.

Sonuç olarak, useState, React bileşenlerinde state kullanmak için önemli bir araçtır ve React Hooks'u özümsemek için önemli bir bileşendir.

Kullanımı

Örnek Kod

Bir React bileşeni içinde useState kullanarak bir state tanımlamak oldukça kolaydır. Örnek olarak, "count" adında bir state tanımlamak için aşağıdaki koddaki gibi useState Hook'u kullanılabilir:

Kod
const [count, setCount] = useState(0);

Kodun açıklaması şöyledir: "const", bir constant değişkeni tanımlar. "[count, setCount]" ise, array destructuring yöntemidir ve "count", state değişkeni, "setCount" ise, state'i güncelleyen bir fonksiyondur. "useState(0)" tam olarak bir Hook fonksiyonudur ve "count" state'inin başlangıç değerini (0) sağlar.

useEffect Kullanımı

useEffect, React fonksiyon bileşenleri içindeki side-effect'leri (yan etkileri) tetiklemek için kullanılır. State'inin güncellenmesinden sonra yapılacak işlemler ya da bileşenin ilk kez render edilmesi gibi durumlar için oldukça faydalıdır.

Bir fonksiyon ve dependency array kullanımı ile etki oluşturur. Fonksiyon, bileşen her render edildiğinde çalıştırılacaktır. Dependency array, fonksiyonun çalışma anına kadar izlenmesi gereken değerler listesini belirtir. Bu şekilde sadece değişen değerler için işlem yapılabilir, diğer durumlarda gereksiz yere fonksiyon çağrısı yapılmamış olur.

Örneğin, bir web uygulamasında bir sayfanın yeniden yüklenmesi gerektiğinde bir side-effect gerçekleştirilebilir. Bunun için aşağıdaki kod yazılabilir:

Parametreler	Açıklama
effect	Side-effect'in belirleneceği fonksiyon
deps	Bir önceki render'a göre etkileşimli bağımlılık dizisi

  useEffect(() => {    window.location.reload();  }, []);

Bu kodda, useEffect fonksiyonu sayfanın yenilenmesi işlemini gerçekleştirmek için window.location.reload() yöntemini kullanıyor. Dependency array içinde hiçbir öğe bulunmadığı için herhangi bir bağımlılık izlenmemekte ve sadece bir kez tetiklenmektedir.

useEffect fonksiyonu, state değişiklikleri gibi uygun durumlarda kullanıldığında web uygulamalarının performansını artırır ve yan etkilerinin güvenli bir şekilde yönetilmesini sağlar.

Kullanımı

useState ile tanımlanan statelerin değiştiği her zaman useEffect devreye girer ve yeniden render işlemi yapılır. Bu kadar basit oldu mu? Evet. Bileşen ilk kez işlendiğinde değiştirilemeyecek sabit, değiştirilebilir değişkenler tanımlanabilir. Kullanımı için öncelikle useEffect fonksiyonu ve bu fonksiyonun içinde hedeflediğimiz işlem veya işlemleri tanımlamamız gerekir. Ayrıca useEffect’in ikinci parametresine önceden belirlenmiş bir durum da gönderilebilir. Bu durum, useEffect’in sadece o durumdaki değişikliklerde çalışmasını sağlar.

Bu Hook, aynı zamanda bileşenin ilk render’ı gibi durumlar için de kullanılır. useEffect, bileşen ilk kez oluşturulduğunda sadece bir kere çalışır. Eğer bu fonksiyonda bir callback fonksiyonu belirtilmezse bileşen state’i güncellendiği andan itibaren useEffect fonksiyonu devreye girer ve yeniden render işlemi yapılır. useEffect, özellikle state ile alakalı durumların değiştiğinde, bu durumu takip etmek ve algılamak için vazgeçilmez bir fonksiyondur.

Örnek Kod

useEffect(()

useEffect, React Hooks'un en sık kullanılanlarından biridir ve side-effect'leri handle etmek için kullanılır. Aşağıdaki örnek kodda, useEffect ile bir console log fonksiyonu çağırılmaktadır:

useEffect(() => {   console.log('Çalıştı')}, []);

Yukarıdaki örnek kodda, useEffect'in ilk parametresine bir arrow function aktarılmıştır. Bu fonksiyon, bileşenin oluşturulması ya da ilgili state'in değiştirilmesi sonrasında çalıştırılır. İkinci parametre olarak ise bir dizi aktarılabilir. Bu dizi sayesinde, useEffect sadece belirtilen state değerleri değiştirildiğinde çalışacaktır.

Bu şekilde, useEffect ile bileşenin state'inden bağımsız olarak side-effect'leri yönetmek mümkün hale gelmektedir. Özellikle API çağrıları ve veri manipülasyonları gibi işlemler için önemli bir araçtır.

Çalıştı

Kodumuzda useEffect Hook'u sayesinde bir side-effect fonksiyonu ekledik. Bu fonksiyon sayesinde verilen örnekte "Çalıştı" kelimesi konsol ekranında görüntülenecektir. useEffect, bileşenimiz ilk kez render edildiğinde ve sonrasında statelerde bir değişiklik olduğunda bu fonksiyonu tekrardan çalıştırabilir. Buradaki boş dizi, component'imizin ilk render'dan sonra sadece bir kere çalışmasını sağlar. useEffect Hook'u sayesinde bileşenlerimizi daha modüler hale getirerek, component'larda state'lere ve yaşam döngülerine olan bağımlılıklarımızı minimuma indirebiliriz.

) }, []);

useEffect(() => { console.log(Çalıştı) }, []);

useEffect, belirli bir bileşenin mount ve unmount edilmesinden sonra istenen davranışları gerçekleştirmek için kullanılır. Bu örnekte, [] içinde herhangi bir state yoktur ve bu sayede, bileşen mount edildikten sonra sadece bir kez çalışacaktır. Eğer [] içinde belirli bir state verilseydi, her o state değiştiğinde useEffect yeniden çalışacaktı.

useContext Kullanımı

useContext Kullanımı

useContext, React uygulamalarında, bileşenler arasında ortak bir konfigürasyon ya da yetkilendirme bilgisi iletmeyi gerektiren durumlarda kullanılır. Bu durumlarda bileşenler arasında props geçmek yerine, useContext kullanılabilir. Bu sayede yerel yönetim daha kolay bir şekilde gerçekleştirilebilir.

Örneğin, bir kullanıcının oturum açmasını gerektiren bir uygulamada, kullanıcının bilgileri diğer bileşenlerle paylaşılmalıdır. useContext ile, bu bilgiler kolayca iletilir ve uygulamanın farklı parçalarında kullanılır.

Aşağıdaki örnek kodda, createContext() kullanarak bir değer oluşturulmuştur. Bu değer, Counter bileşeninde kullanılmak için CountContext'e atanmıştır. CounterContext sayesinde, Counter bileşeninde bu değer kullanılır.

Kod:	const ValueContext = createContext();
Atama:	const value = useContext(ValueContext);

Kullanımı

useContext kancası, React uygulamasındaki yerel yönetimi kolaylaştırmak için kullanılır. Bileşenlerin her biri, paylaşılan bir konfigürasyon ya da yetkilendirme bilgisi gibi iletmeyi gerektiriyorsa, useContext kancası kullanılarak yönetilebilir. Bu, bileşenlerin tüm özelliklerinde desteklenir ve bu şekilde kodun daha kolay okunmasını sağlar.

useContext kullanarak, bileşenler karmaşık prop iletimine gerek kalmadan verileri paylaşabilir. Bu, React uygulamanızın performansını arttırabilir ve kodun daha düzenli olmasını sağlar. Aşağıdaki örnek, değer dizisini paylaşmak ve güncellemek için useContext kullanımını gösterir.

Bileşenler	Miktar
Component 1	20
Component 2	10
Component 3	30

Yukarıdaki tabloyu react uygulamanızda kullanmak istediğinizde, fiziksel olarak tüm bileşenler için ayrı ayrı prop geçmeniz gerekir. Ancak, useContext kullanarak, tüm bileşenlerin değer dizisine kolayca erişebilir ve kodunuzu daha düzenli hale getirebilirsiniz.

Örnek Kod

const ValueContext

useState, useEffect, useContext, ve useReducer gibi Hooks'lar gibi createContext de bir Hook'tur. createContext, bir dizi veri ve işlev yönetmek için kullanılır. Bu veri veya işlevler, createContext'in içindeki tüm bileşenler tarafından kullanılabilir. createContext yöntemi, bir örnek nesne oluşturur ve bu nesnenin özellikleri, hangi verilerin paylaşılacağını belirler.

Aşağıdaki kod örneği, createContext'in kullanımını göstermektedir:

    const ValueContext = createContext();

Bu örnekte, createContext, ValueContext olarak adlandırılan bir değişkene atanmıştır. Bu değişken, bileşenler arasında veri ve işlevlerin nasıl paylaşılacağını belirler. createContext'i kullanırken, bir değer atanabilir. Bu değer, createContext'in default değeri olarak kullanılır.

Bir bileşen, createContext'i kullanarak bir veri kümesi oluşturabilir. Bu veri kümesi, başka bir bileşen tarafından kullanılabilecek bir hook olarak kurulabilir. createContext, bir dizi senaryoda faydalıdır ve React uygulamanızdaki durumların doğru bir şekilde yönetilmesine yardımcı olur.

useReducer Kullanımı

React Hooks, React sınıflarını kullanmadan state ve diğer React fonksiyonelliği eklemek için kullanılır. useState, state'i React fonksiyon bileşenlerinde kullanmanıza olanak tanır. Ancak, çok sayıda state kullanmanız gerektiğinde state yönetimi problemli hale gelebilir. Bu noktada, useReducer kullanışlı bir alternatif olabilir. useReducer, useState yerine kullanılan bir Hook'tur ve state yönetimini kolaylaştırmak için kullanılır.

Kullanımı oldukça basittir. İlk olarak bir intialState belirleyin. Ardından, state'i güncellemek için reducer fonksiyonunu yazın. Son olarak, useReducer Hook'u ile state ve dispatch fonksiyonunu değişkenlendirin. Artık state'i dispatch fonksiyonu ile güncelleyebilirsiniz.

Kod	Açıklama
const initialState = { count: 0 };	İlk state değerleri belirleniyor.
function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); }}	Reducer fonksiyonu state'in güncellenmesi için kullanılıyor. Her bir seferinde hangi eylemin gerçekleşeceği burada belirleniyor.
const [state, dispatch] = useReducer(reducer, initialState);	useReducer Hook'u ile state ve dispatch fonksiyonu değişkenlendiriliyor. Artık güncelleme yapmak için dispatch fonksiyonu kullanılabilir.

useReducer yalnızca state yönetiminde kullanılmaz. Ayrıca, işlem karmaşıklığı yüksek olan React uygulamalarında performansı arttırmaya yardımcı olur. Böylece, useState fonksiyonu yerine useReducer kullanarak state yönetimini ve uygulama performansını kolayca optimize edebilirsiniz.

Kullanımı

useReducer Hook, useState yerine kullanılan bir Hook'tur. Çok sayıda state kullanmanız gerektiğinde state yönetimini kolaylaştırmak için kullanılır. useReducer Hook'u kullanarak, karmaşık bileşenlerdeki state yönetimini kolaylaştırabilirsiniz.

useReducer Hook'un kullanımı, initial state ve bir reducer fonksiyonu gerektirir. İlk önce, initial state, reducer fonksiyonunun ilk parametresi olarak belirtilir. Reducer fonksiyonu, mevcut state ve action'ı alır. Action'lar, state'in değiştirilmesi için kullanılan bir dizi işlemi ifade eder. Daha sonra state, reducer fonksiyonunun dönüş değeri olarak döndürülür. Bu sayede, state yönetimi daha modüler ve anlaşılabilir hale gelir.

Aşağıdaki örnek kod, useReducer Hook'u kullanarak bir bileşen içinde state yönetimini göstermektedir:

const initialState = 0;const reducer = (state, action) => {  switch (action.type) {    case 'increment':      return state + 1;    case 'decrement':      return state - 1;    default:      return state;  }};const Counter = () => {  const [state, dispatch] = useReducer(reducer, initialState);  return (    
      Count: {state}       dispatch({type: 'increment'})}>Increment       dispatch({type: 'decrement'})}>Decrement    
  );};

Örnek Kod

const [state, dispatch]

useReducer, useState yerine kullanılan bir Hook'tur. Çok sayıda state kullanmanız gerektiğinde state yönetimini kolaylaştırmak için kullanılır. Aşağıdaki örnek kod, reducera eklediğiniz ilk öğelerden biridir.

Parameter	Description
reducer	Bir işleve başvurarak, normal bir durum üzerinde işlem yapmanızı sağlar.
initialState	State'in ilk değeri set etmek için kullanılır.

Kullanımına bir örnek:

const initialState = 0;function reducer(state, action) {  switch (action.type) {    case 'arttir':      return state + 1;    case 'azalt':      return state - 1;    default:      return state;  }}const [state, dispatch] = useReducer(reducer, initialState);

Burada, değişkenimiz "state" olurken, "dispatch" ise "state" değişkenimizi güncellemek için kullanılacak işlevdir. Yukarıdaki kodda, başlangıç durumu 0'dır. Reducer fonksiyonumuzda, gelen action'ın türüne göre, state'i bir artırır ya da azaltır. Sonuç olarak, useReducer Hook'u, birden fazla state kontrol etmemiz gerektiğinde işleri kolaylaştırır.

Öğrenme Kaynakları

React Hooks öğrenmek isteyenler için birçok kaynak bulunmaktadır.

Bunlardan ilki, React'ın resmi dokümanlarıdır. Bu dokümanlar, Hooks'un tüm fonksiyonlarını gösterir ve örnek kodlarla açıklar. (https://tr.reactjs.org/docs/hooks-intro.html)

Bir diğer öğrenme kaynağı ise React Hooks Kullanımına Giriş adlı sitedir. Bu site, Hooks'u öğrenmek isteyenlere adım adım rehberlik eder ve örnekler sunar. (https://www.tutorialspoint.com/reactjs-react-hooks-introduction)

React Hooks, oldukça yeni ve dinamik bir teknolojidir. Bu yüzden, öğrenme kaynakları her geçen gün artmaktadır. Siz de gerektiği zaman farklı kaynakları keşfedebilir ve kullanabilirsiniz.

1. React Resmi Dokümanları

1. React Resmi Dokümanları (https://tr.reactjs.org/docs/hooks-intro.html)

React Hooks öğrenmek isteyenler için en güvenilir kaynak React resmi dokümanlarıdır. Bu dokümanlar, React Hooks'un kullanımı, avantajları ve dezavantajları gibi temel bilgileri kapsar. Ayrıca, dokümanlar, useState, useEffect, useContext ve useReducer gibi popüler Hooks'ların kullanımını anlatan ayrıntılı örnekler içerir.

Ayrıca, dokümanlarda Hooks'ların kullanımından kaçınmak gereken durumlar ve en iyi uygulama örnekleri gibi konulara da yer verilir. Dokümanlar ayrıca, konuları kolayca anlaşılır hale getirmek için ilgili örneklerle zenginleştirilir. Bu sayede, React Hooks'u öğrenmek isteyen herkes kolayca bu kaynaklardan yararlanabilir.

React resmi dokümanları, React Hooks'u öğrenmek isteyen herkes için açık ve anlaşılır bir kaynak sağlar. Ayrıca, dokümanlar, React Hooks'u kullanarak performansı artırmak veya daha az kod yazarak daha hızlı projeler oluşturmak gibi avantajları açıklar. Çok sayıda örnek ve açıklama içerdiğinden, öğrenme süreci daha da kolaylaşır.

2. React Hooks Kullanımına Giriş

React Hooks'u öğrenmek isteyenler için en yararlı kaynaklardan biri, Tutorialspoint'in React Hooks Kullanımına Giriş başlıklı sayfasıdır. Bu sayfa, React Hooks'un temellerinden başlayarak kullanımına ve örneklerine kadar detaylı bir şekilde açıklamaktadır. Sayfada kullanılan örnek kodlar ve açıklamalar, React Hooks'u öğrenmek isteyenler için oldukça faydalı olacaktır.

Sayfada ayrıca useState, useEffect, useContext ve useReducer gibi farklı React Hooks örneklerinin yanı sıra, örnek kodlar ve detaylı açıklamalar da yer almaktadır. Bunlar sayesinde React Hooks kullanımı hakkında daha fazla bilgi sahibi olabilir, uygulamalarınızda Hooks'u nasıl kullanabileceğinizi öğrenebilirsiniz.

Tutorialspoint'in React Hooks Kullanımına Giriş sayfası aynı zamanda, React ile ilgili farklı konular hakkında da kapsamlı bir kaynak niteliği taşıyor. React ile ilgili genel bilgilerin yer aldığı başlık sayfasından, component lifecycle'ı hakkında bilgiye kadar farklı konulara ulaşmak mümkündür.

Bu kaynakla birlikte, React Hooks'u öğrenmek isteyenler, React ile ilgili diğer konularda da bilgi sahibi olabilecekleri kapsamlı bir kaynak elde edeceklerdir.