React Hook nedir ne işe yarar?

React Hook nedir ne işe yarar?

React Hook, React kütüphanesinde tanıtılan bir özelliktir. React Hook, sınıf bileşenleri yerine fonksiyonel bileşenlerin kullanılmasına olanak sağlayan bir yapıdır. React Hook, karmaşık bileşenleri daha kolay bir şekilde oluşturmayı ve yönetmeyi sağlar.

React Hook'ların Amacı Nedir?

React Hook'ların temel amacı, fonksiyonel bileşenlerin sınıf bileşenleri gibi davranmasını sağlamaktır. Bu sayede, state yönetimi, yan etkiler, yaşam döngüsü metotları gibi sınıf bileşenlerine özgü konseptleri kullanmak için sınıf bileşenleri yazmak zorunda kalmadan, fonksiyonel bileşenlerin kullanılmasına olanak sağlar.

Neden React Hook Kullanmalıyız?

React Hook, birçok avantaja sahiptir ve neden kullanılması gerektiği aşağıdaki gibi sıralanabilir:

1. Kodun Daha Anlaşılır Olmasını Sağlar: React Hook sayesinde, state yönetimi ve yan etkiler gibi kavramları daha basit bir şekilde yazabiliriz. Bu da kodun daha okunabilir ve anlaşılabilir olmasını sağlar.

2. Karmaşık Bileşenleri Basitleştirir: Karmaşık bileşenler, sınıf bileşenlerinde daha fazla kod yazmayı gerektirirken, React Hook ile bu yapının daha basit bir şekilde oluşturulabilmesi mümkün hale gelir.

3. Kolay Test Edilebilirlik: Fonksiyonel bileşenler, sınıf bileşenlerine kıyasla daha kolay test edilebilir. Hook kullanımı, bileşenin mock veriler ile test edilebilmesini kolaylaştırır.

React Hook Türleri

React Hook, iki temel türden oluşur:

1. State Hook: State Hook, bileşenin state değerlerini tutmasını ve bu değerlerin güncellenmesini sağlar. useState() fonksiyonu ile kullanılır.

2. Effect Hook: Effect Hook, bileşenin monte, güncelleme ve düğüm çıkarma gibi yaşam döngüsü metotlarını taklit eder. useEffect() fonksiyonu ile kullanılır.

State Hook Kullanımı

State Hook kullanımı için öncelikle, useState() fonksiyonunu React kütüphanesinden içe aktarmamız gerekmektedir. Daha sonra, useState() fonksiyonunu kullanarak başlangıç state değeri ve bu değerin güncellenmesi için fonksiyon tanımlayabiliriz.

Örnek olarak, bir sayaç bileşeni oluşturmak için aşağıdaki gibi bir işlem gerçekleştirilebilir:

const Counter = () => {

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

  const increment = () => setCount(count + 1);

  return (

   Increment

  );

}

Effect Hook Kullanımı

Effect Hook, bileşenin yaşam döngüsü metotlarını taklit etmek için kullanılır. useEffect() fonksiyonu, birinci parametre olarak bir callback fonksiyon ve ikinci parametre olarak bir dizi alır. Callback fonksiyonu, bileşen güncellendiğinde veya düğüm çıkarıldığında çalışır.

Örnek olarak, kullanıcının adını ve soyadını takip eden bir bileşen yapısında useEffect() kullanımı aşağıdaki gibi olabilir:

const User = () => {

  const [userData, setUserData] = useState({ name: "", lastName: "" });

  useEffect(() => {

   document.title = `Welcome ${userData.name} ${userData.lastName}`;

  }, [userData]);

  const handleInputChange = (e) => {

   setUserData({ ...userData, [e.target.name]: e.target.value });

  }

  return (

  );

}

React Hook, React uygulamalarında sınıf bileşenleri yerine fonksiyonel bileşenlerin kullanılmasına olanak sağlar. Bu sayede, kodun daha anlaşılır ve basit bir şekilde yazılmasını sağlar. State Hook ve Effect Hook gibi farklı türleri bulunur ve kullanımı oldukça kolaydır. React Hook, geliştiricilere daha düzenli ve sık okunan kod yazma imkanı sunar.

Sıkça Sorulan Sorular

React Hook, React 16.8 sürümü ile birlikte eklenen bir özelliktir. Bu özellik, fonksiyonel bileşenlere state ve diğer React özellikleri eklemek için kullanılan bir yöntemdir.

React Hook kullanmanın birkaç avantajı vardır. İlk olarak, sınıf bileşenleri yerine fonksiyonel bileşenler kullanarak kodun daha basit ve okunması daha kolay olmasını sağlar. Ayrıca, karmaşık yapıları daha kolay bir şekilde yönetebilir ve paylaşılabilir Hooks özelleştirebilirsiniz.

useState() Hook'u, bir state değeri ve onu güncellemek için bir fonksiyon döndüren bir dizi döndürür. İlk değer, useState() fonksiyonunun parametresi olarak verilir. Örneğin:

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

Bu örnekte, count değişkeni başlangıç değeri 0 olan bir state değeridir. setCount ise bu state değerini güncellemek için kullanılır.

useEffect() Hook'u, React bileşeninin render edilmesinden sonra çalışacak bir yan etki fonksiyonu tanımlamak için kullanılır. Bu Hook, API çağrıları, event dinleyicileri veya zamanlayıcılar gibi yan etkiler için uygundur. Örneğin:

useEffect(() => {

// Yan etki fonksiyonu

console.log('Component rendered!');

// Clean-up fonksiyonu

return () => {

console.log('Component unmounted!');

}

}, []);

Bu örnekte, useEffect() fonksiyonunun ilk parametresi olan yan etki fonksiyonu her render sonrasında çalışacaktır. İkinci parametre olarak boş bir dizi verildiğinde ise sadece bileşenin bir kez render edildiği durumlarda yan etki fonksiyonu çalışacaktır.

Custom Hook, birden fazla bileşen arasında state mantığını veya diğer işlevselliği paylaşmanın bir yoludur. Bir custom Hook oluşturarak, sınıf bileşenleri kullanmadan bileşenleri kolaylıkla yeniden kullanabilir ve kod tekrarını azaltabilirsiniz. Ayrıca, custom Hook'ları bileşenler içindeki kodu daha da temiz ve okunabilir hale getirmek için kullanabilirsiniz.