React.Js useState() Kullanımı

React.Js useState() Kullanımı

useState()

useState React'ta bir durum yönetimi hook'u olarak kullanılır ve fonksiyon bileşenlerinde durum yönetimini kolaylaştırır. Bu hook, bir bileşenin yerel durumunu değiştirmenizi ve yeniden render olmasını tetiklemenizi sağlar. useState genellikle bir çift olarak döner: mevcut durum değeri ve bu durumu güncellemek için kullanılan bir fonksiyon.

Kullanımı

useState'i kullanmanın temel sözdizimi şu şekildedir:
 

const [state, setState] = useState(initialState);

• state: Mevcut durum değeri.
• setState: Durumu güncellemek için kullanılan fonksiyon.
• initialState: İlk durum değeri.

Örnek

import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 0, başlangıç durumu
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Bu örnekte, count adlı bir durum değişkeni oluşturduk ve başlangıç değeri olarak 0 verdik. setCount fonksiyonu, bu count durumunu güncellemek için kullanılır.

Lazy Initialization

useState ayrıca "lazy initialization" (tembel başlatma) özelliğini de destekler. Yani, başlangıç durumu bir fonksiyon ile belirlenebilir. Bu, başlangıç durumunun hesaplanması pahalı bir işlem ise yararlıdır.

const [state, setState] = useState(() => {
// pahalı hesaplama
return initialState;
});

Fonksiyonel Güncellemeler

setState fonksiyonu, mevcut duruma bağlı olarak durumu güncellemek için bir fonksiyon alabilir. Bu, React'ın durumu asenkron olarak güncelleyebileceği durumlar için yararlıdır.

setCount(prevCount => prevCount + 1);

Dikkat Edilmesi Gerekenler

• useState hook'u yalnızca React bileşenlerinin en üst seviyesinde kullanılmalıdır. Döngüler, koşullar veya iç içe fonksiyonlar içinde kullanılmamalıdır.
• setState fonksiyonu bileşeni yeniden render eder. Bu nedenle, gereksiz yere çok fazla setState çağrısı yapmaktan kaçınmak önemlidir.
• useState temel bir React hook'u olduğu için, karmaşık durum yönetimi gereksinimleri için genellikle daha gelişmiş hook'lar veya kütüphaneler (örneğin, useReducer veya Redux) kullanılır. Ancak, basit durum yönetimi ihtiyaçları için useState genellikle yeterlid