React'ta useState Hook'unun Kullanımı: Düz Değişkenlerin Yerine Neden Kullanılır?

React'ta state yönetimi, componentlerin re-render edilmesini sağlamak için önemlidir. Componentlerdeki değişkenlerin değerleri değiştikçe, React state yönetimi aracılığıyla bu değişiklikleri algılayarak componentleri yeniden render eder.

React, componentlerin state'ini yönetmek için useState hook'u sağlar. useState, bir component içinde kullanılabilen ve state değerleri ile bu değerleri değiştirmek için kullanılan bir fonksiyondur. Kullanıcı arayüzündeki herhangi bir etkileşim sonrası bu fonksiyon çalışarak, component'in yeniden render edilmesi sağlanır.

Düz bir değişken yerine useState hook'u kullanılması, componentlerin daha tutarlı ve öngörülebilir bir şekilde çalışmasını sağlar. Ayrıca, componentlerin ölçeklenebilirliğini ve yeniden kullanılabilirliğini arttırır.

Aşağıdaki örnekte, bir counter componenti örneği useState kullanılarak oluşturulmuştur:

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

Bu örnekte, useState hook'u kullanılarak, count adlı state değişkeni ve setCount adlı fonksiyon tanımlanmıştır. increment fonksiyonu ile count değişkeni, kullanıcı tıklama sonrası 1 artırılarak güncellenir. Bu değişiklik, React tarafından algılanır ve component yeniden render edilir.

Bir useState hook'u, daha karmaşık componentlerde de kullanılabilir. Birden fazla state değişkeni tanımlanabilir ve bu değişkenlerin değerleri, bağımsız olarak güncellenebilir.

useState kullanımı, React'ta state yönetimi için temel bir yaklaşımdır ve componentlerin yeniden render edilmesi için önemlidir. Bu nedenle, React uygulamalarının geliştirilmesinde useState ve diğer React hook'larının doğru kullanımı, önemli bir rol oynamaktadır.