React Hook | “useState” ve “useEffect” nedir?
React nedir, ne için kullanılır ve bir React projesine nasıl başlanır bunları bir önceki içeriğimde aktarmıştım. Şimdi gelelim daha derin konulara…
React Hook Nedir?
React hook, fonksiyonel bileşenlerin state yönetimi, yaşam döngüsü metotlarına erişim ve diğer React özelliklerine kolayca erişimini sağlayan bir özelliktir. React hook’lar, “useState”, “useEffect”, “useContext”, “useReducer” ve “useCallback” gibi önceden tanımlanmış fonksiyonlardır. “useState” ve “useEffect” hook’larını ilerleyen satırlarda ele alacağız.
“Hook” kelimesi, programlama dillerinde genellikle bir işlevin işlevselliğini genişleten veya değiştiren küçük bir parça kodu ifade eder. O halde küçük bir hook örneği verelim neymiş görelim.
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
function incrementCount() {
setCount(count + 1);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={incrementCount}>
Click me
</button>
</div>
);
}“useState” kafanızı karıştırmasın oraya geleceğiz. Amaç hook nedir anlamak. İşte küçük bir parça “useState” hook örneği. Sanırım artık hook denildiği zaman hayalimizde bir şeyler canlanmaya başlayacak. O zaman şimdi bakalım “useState” neymiş ⤵
“useState” Nedir?
React kütüphanesinin bir parçasıdır. Bir fonksiyonel bileşenin durumunu yönetmek için kullanılan bir hooks fonksiyonudur. Kısacası useState, bir işlev componentindeki durumu izlememize olanak tanır.
useState fonksiyonu, işlevsel bileşenlerde durum yönetimini kolaylaştırır. Bu sayede React uygulamalarının performansı artar ve kod yazmak daha kolay hale gelir. Dilerseniz useState kavramını aşağıdaki örnekle daha ayrıntılı olarak inceleyelim.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
function decrement() {
setCount(count - 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default Counter;useState Hook’u kullanmak için önce onu componentimize(bileşen) import etmemiz(aktarmak) gerekiyor. Ve bu import işlemini daima componentin en üstünde yapmalıyız!
useState iki değer döndürür. Biri şu anki mevcut durumdur(count). Diğeri(setCount) ise durumu güncelleyen işlevdir ya da fonksiyondur da diyebiliriz.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);Burada useState fonksiyonu kullanılarak “count” adında bir değişken oluşturulmuş ve 0 ile başlatılmıştır. “setCount” fonksiyonu ise “count” değişkeninin güncellenmesini sağlar.
function increment() {
setCount(count + 1);
}
function decrement() {
setCount(count - 1);
}Kodun bu kısmında “increment” ve “decrement” fonksiyonları, “setCount” fonksiyonunu kullanarak “count” değişkeninin artırılmasını veya azaltılmasını sağlar.
Yukarıda da gördüğümüz gibi setCount durumu güncelleyip count değişkenine gönderiyor ve sonuçlar dönüyor.
“useEffect” Nedir?
useEffect de tıpkı useState gibi React da bir hooks fonksiyonudur. Bu fonksiyon da component’in mount, update veya unmount durumlarında işlemleri gerçekleştirmek için kullanılır. Yani useEffect React component’inin yaşam döngüsü boyunca belirli işlemleri takip etmek ve gerçekleştirmek için kullanılır.
Kafalar karışmasın, örneğin bir component’in mount edilmesi durumunda API’den veri çekilmesi, state veya props güncellenmesi durumunda tekrar API’den veri çekilmesi, component’in unmount edilmesi durumunda aboneliklerin iptal edilmesi gibi işlemler gerçekleştirebiliriz. Aşağıda useEffect örneğini görebilirsiniz.
useEffect(() => {
console.log("lorem");
});
useEffect(() => {
console.log(`lorem`);
}, []);Bu örnekte anlatılmak istenen useEffect fonksiyonu, birinci parametre olarak bir fonksiyon alır ve bu fonksiyon, component’in mount veya update durumlarında çalıştırılır. İkinci parametre olarak bir dizi alır ve bu dizi, useEffect fonksiyonunun hangi state veya props değişikliklerinde çalışacağını belirler. Bu dizi belirtilmezse, useEffect her state veya props değiştiğinde çalıştırılır.
Evet dağılmıyoruz çünkü güzel bir örnekle useEffect’de noktayı koyacağız.
import React, { useState, useEffect } from 'react';
function Example(props) {
const [count, setCount] = useState(0);
const [name, setName] = useState("");
useEffect(() => {
console.log("Component mounted or updated!");
});
useEffect(() => {
console.log(`Name changed to ${name}`);
}, [name]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
<input
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
/>
</div>
);
}useState hakkında artık bir fikrimiz olduğunu düşünüyorum. Buradaki “Example” componentinde iki state değişkeni kullanılmış, count ve name. İlk useEffect çağrımız, bileşen her güncellendiğinde çalışır. İkinci useEffect çağrımız ise yalnızca name değişikliğe uğradığında çalışır. Nasıl mı? O zaman aşağıyı izleyelim ⤵
Gördüğümüz gibi sadece “Click me” dediğimde konsola “Component mounted or updated!” yazdırılır. Defalarca da tıklasam aynı useEffect çağrımız geliyor. Ancak, inputa bir şeyler girmeye başladığımda devreye ikinci useEffect girerek konsolda “Name changed to [name]” yazdırılır. Çünkü name state tetiklenir. Bu durumda ikinci useEffect kullanılarak gereksiz iş yükünden kaçınılmış olur.
Umarım useState ve useEffect konusunda verimli bir içerik olmuştur. Hoşça kalın…
“Yazılımda kadın eli”
