React.js useState Hook Kullanımı

React.js’de useState hook’unun kullanımı oldukça yaygındır ve bileşenlerde durum yönetimi için kullanılır. useState hook’unun basit bir kullanımı:

import React, { useState } from 'react';

function ExampleComponent() {
  // useState hook'u kullanarak bir durum (state) ve 
  // bu durumu güncellemek için bir fonksiyon (setState) tanımlıyoruz
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* Butona tıklandığında count durumunu bir arttır */}
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default ExampleComponent;

Bu kodda, useState hook’u, bir durum değeri olan count ve bu durumu güncellemek için bir fonksiyon olan setCount‘u tanımlar. İlk değeri 0 olarak verilmiştir.

Daha sonra, count değerini ekranda gösteririz. Butona her tıkladığımızda, setCount fonksiyonunu kullanarak count değerini bir arttırırız.

Bu şekilde, useState hook’u, bileşenlerin durumunu (state) yönetmek için kullanılabilir ve bileşenin yeniden render edilmesini sağlayarak kullanıcı arayüzünü güncelleyebilir.

Share on Facebook

Tweet