useState Kullanılırken Yapılan En Yaygın 4 Hata

React projelerinde en sık kullanılan hook'lardan biri olan useState, fonksiyonel bileşenlerde durumu yönetmenin en temel yollarından biridir. Ancak, bu hook'u kullanırken yapılan yaygın hatalar, performans sorunlarına ve istenmeyen hatalara neden olabilir. Bu yazıda, React kullanırken useState ile en sık yapılan hataları inceleyecek ve bu hatalardan nasıl kaçınılabileceğine dair çözümler sunacağız.

1. İlk State değeri fonksiyon ise

React'te useState ile başlatılan değerler, doğrudan bir fonksiyonun sonucuna dayanıyorsa, her render işleminde bu fonksiyon tekrar tekrar çağrılır. Eğer fonksiyon ağır bir işlemse, uygulamanızın performansını olumsuz etkileyebilir.

Yanlış kullanım:

const [data, setData] = useState(expensiveFunction());

Bu kod her render'da expensiveFunction'u çağırır ve performans sorunlarına yol açabilir.

Doğru kullanım:

const [data, setData] = useState(() => expensiveFunction());

Bu yöntemle, expensiveFunction sadece bileşen ilk kez render edildiğinde çalıştırılır.

2. Güncelleyici Fonksiyonun Yanlış Kullanılması

React'te bir state değişikliği yaparken, önceki state'e bağlı olarak bir güncelleme yapmanız gerekebilir. Ancak, bir hata olarak birçok geliştirici, önceki state'i dikkate almadan doğrudan güncelleme yapar. Bu da veri tutarsızlıklarına yol açar.

Yanlış kullanım:

setCount(count + 1);

Doğru kullanım:

setCount(prevCount => prevCount + 1);

Bu şekilde, önceki state değerine bağlı olarak güvenli bir güncelleme yapabilirsiniz.

3. useState'i Yanlış Yerde Kullanmak

React'in hook kurallarından biri olan "hook'ların yalnızca fonksiyonel bileşenlerin en üst seviyesinde kullanılma zorunluluğu" sıkça gözden kaçırılır. useState'i döngü, koşul veya iç içe fonksiyonlar içinde kullanmak, React'in state yönetimini bozabilir.

Yanlış kullanım:

if (condition) {
  const [value, setValue] = useState(false);
}

Doğru kullanım:

const [value, setValue] = useState(false);

if (condition) {
  // State'i burada kullan
}

React, hook'ların her render'da aynı sırayla çalıştırılmasını bekler. Koşullarla bu sırayı bozmak hatalara neden olabilir.

4. State'in Doğrudan Değiştirilmesi

React'te state değişiklikleri her zaman** immutable (değiştirilemez)** olmalıdır. Özellikle nesneler ve dizilerle çalışırken, state'i doğrudan değiştirmek büyük bir hata olur.

Yanlış kullanım:

const [user, setUser] = useState({ name: 'John', age: 30 });
user.name = 'Jane'; // Yanlış
setUser(user);      // Yanlış

Doğru kullanım:

setUser(prevUser => ({
  ...prevUser,
  name: 'Jane'
}));

Bu yöntemle, state'i doğrudan değiştirmeden yeni bir kopya oluşturup güvenli bir güncelleme yapabilirsiniz.

Sonuç

useState kullanırken yapılan yaygın hataları bilmek ve bunlardan kaçınmak, React uygulamalarınızın performansını büyük ölçüde iyileştirebilir. Yukarıda ele aldığımız dört yaygın hata, birçok geliştirici tarafından göz ardı edilebiliyor. Ancak bu hataların farkında olup, doğru çözümleri uygulayarak React projelerinizi daha sağlam hale getirebilirsiniz.