React Hook’lar zor bir konsepttir ve nasıl kullanılacağını bilmek zor olabilir. React’ten en iyi şekilde yararlanmak için bu ipuçlarını izleyin.
React’te yeniyseniz, React Hook’ların ne olduğunu ve ne zaman kullanmanız gerektiğini merak ediyor olabilirsiniz. React, yalnızca 16.8 sürümünde kancaları tanıttı, ancak bunlar hızla kitaplığın önemli bir özelliği haline geldi.
React Hooks’un temelleri hakkında her şeyi öğrenin ve bunları React uygulamalarınızda kullanmak için bazı en iyi uygulamaları keşfedin.
Tepki Kancaları Nedir?
React Hooks, ekstra kod yazmadan durum ve diğer React özelliklerini kullanmanıza izin verir. Kancalar, kodunuzu daha okunabilir ve bakımı yapılabilir hale getirmenin harika bir yoludur.
React’te birkaç farklı Kanca vardır , ancak en yaygın olarak kullanılanlar useState ve useEffect’tir. useState kancası, bileşenlerinize durum eklemenizi sağlar. Bu, bir kullanıcının girdisini veya bir formdaki değişiklikleri takip etmek gibi şeyler için kullanışlıdır. useEffect kancası, bir bileşen oluşturulduğunda bir işlevi çalıştırmanıza izin verir. Bu, bir API’den veri almak veya bir abonelik oluşturmak gibi şeyler için kullanışlıdır.
Tepki Kancalarını Ne Zaman Kullanmalısınız?
Bir bileşene ekstra işlevsellik eklemeniz gerektiğinde React Hooks kullanmalısınız. Örneğin, bir kullanıcının girdisini takip etmeniz gerekiyorsa useState kancasını kullanırsınız. Bir API’den veri almanız gerekiyorsa, useEffect kancasını kullanırsınız. API çağrıları için özel kancalar da oluşturabilirsiniz .
React’i yeni kullanmaya başladıysanız, henüz Hooks kullanmanıza gerek kalmayabilir. Ancak daha karmaşık uygulamalar oluştururken, Hook’ların bileşenlerinize ekstra işlevsellik eklemenin harika bir yolu olduğunu göreceksiniz.
React Hooks ile En İyi Uygulamalar
Artık React Hook’ların ne olduğunu ve ne zaman kullanılacağını bildiğinize göre, bazı en iyi uygulamalardan bahsedelim.
1. Yalnızca React Fonksiyonlarından Çağrı Kancaları
React Hooks’u yalnızca React işlevlerinden çağırmalısınız. Bir sınıf bileşeninden tepki kancalarını çağırmaya çalışırsanız, bir hata alırsınız.
Bunun nedeni, yalnızca bir React işlevinden bir React Hook çağırabilmenizdir. React işlevleri, bir function anahtar sözcüğüyle bildirdiğiniz bileşenlerdir.
İşte bir React işlevi bileşeni örneği:
import React, { useState } from ‘react’;
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Ve işte bir sınıf bileşeni örneği:
import React, { Component } from ‘react’;
class App extends Component {
state = {
count: 0
};
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
İlk örnek, function anahtar sözcüğünü kullanarak Uygulama bileşenini bildirirken, ikincisi class anahtar sözcüğünü kullanır.
2. Yalnızca Tek Kullanımlık Efekt Kancası Kullanın
useEffect kancasını kullanıyorsanız, bileşen başına yalnızca bir tane kullanmalısınız. Bunun nedeni, bir bileşen oluşturulduğunda useEffect’in çalışmasıdır.
Birden çok useEffect kancanız varsa, bir bileşen oluşturulduğunda bunların tümü çalışır. Bu, beklenmeyen davranış ve performans sorunlarına yol açabilir. Aşağıdaki örnekte, her iki useEffects, Uygulama bileşeni her oluşturulduğunda çalışır.
import React, { useState, useEffect } from ‘react’;
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(‘This will run whenever the App component renders!’);
}, []);
useEffect(() => {
console.log(‘This will also run whenever the App component renders!’);
}, []);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Birden çok useEffect kancası kullanmak yerine, tek bir useEffect kancası kullanabilir ve tüm kodunuzu bunun içine koyabilirsiniz. Aşağıdaki örnekte, Uygulama bileşeni her oluşturulduğunda yalnızca bir useEffect kancası çalışır.
import React, { useState, useEffect } from ‘react’;
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(‘This will run whenever the App component renders!’);
console.log(‘This will also run whenever the App component renders!’);
}, []);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Bu, yalnızca ilk örnekten React Hooks arayabileceğiniz anlamına gelir. İkinci örnekten React Hooks’u çağırmaya çalışırsanız, bir hata alırsınız.
3. Kancaları En Üst Düzeyde Kullanın
React Hooks ile en iyi uygulamalardan biri, onları en üst düzeyde kullanmaktır. Döngüler, koşullar veya iç içe işlevler içinde kanca kullanmaktan kaçınmalısınız. Örneğin, bir for döngüsü içinde State kullanırsanız, döngü her çalıştığında React yeni bir durum değişkeni oluşturur. Bu beklenmedik davranışlara yol açabilir.
import React, { useState } from ‘react’;
function App() {
for (let i = 0; i < 10; i++) {
// Don’t do this!
const [count, setCount] = useState(0);
}
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Yukarıdaki örnekte, Uygulama bileşeni yalnızca döngünün son yinelemesinden sayı ve düğmeyi oluşturacaktır. Bunun nedeni, React’in yalnızca son yinelemedeki durum değişkenini güncellemesidir.
State’i bir döngü içinde kullanmak yerine, döngünün dışında bir durum değişkeni bildirebilirsiniz. Bu şekilde, React yalnızca bir durum değişkeni oluşturacak ve buna göre güncelleyecektir.
import React, { useState } from ‘react’;
function App() {
// This is the correct way to use useState inside a loop
const [count, setCount] = useState(0);
for (let i = 0; i < 10; i++) {
// …
}
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
4. Kancaları Aşırı Kullanmayın
React Hooks güçlü bir araçtır, ancak bunları aşırı kullanmaktan kaçınmalısınız. Kendinizi her bileşende birden fazla Kanca kullanırken bulursanız, bunları aşırı kullanıyor olabilirsiniz.
React Hooks, durumu birden çok bileşen arasında paylaşmanız gerektiğinde en kullanışlıdır. Gereksiz Kancaları kullanmaktan kaçının çünkü kodunuzu okumayı zorlaştırabilirler ve aşırı kullanılırlarsa performansı etkileyebilirler.
React 18 Hooks Kullanarak Daha Fazla İşlevsellik Ekleyin
React 18’in piyasaya sürülmesiyle birlikte yeni kancalar mevcut. Her kanca belirli bir React özelliğine özeldir. Mevcut tüm kancaların bir listesini React web sitesinde bulabilirsiniz. Ancak en yaygın olarak kullanılan kancalar hala useState ve useEffect’tir.