React useState Kullanımı
React useState() Kullanımı

Selamlar!

React’ta sıklıkla kullanılan state konusuna değiniyoruz. Her zamanki gibi anladığım kadarıyla anlatmaya çalışacağım. Lütfen eklemek istediğiniz kısımlar olursa yorum olarak belirtmekten çekinmeyiniz.

Hooks yapılarından önce lütfen Component yapısını bildiğinizden emin ulunuz. Dilerseniz React Component Nedir, Ne İşe Yarar? yazıma öncesinde bir göz atabilirsiniz.

Diğer programlama dillerinde bir değişken oluşturup bu değişkene bir değer atıyoruz. Aynı işlemi React’ta yapmak istediğimizde useState isimli Hooks devreye giriyor. Bu hooks’un amacı verileri tutmak için kullanıyoruz.

React’ta bulunan tüm Hooks yapılarına buradan ulaşabilirsiniz.

Neden useState Kullanıyoruz?

Bir şeyin neden ortaya çıktığını ve hangi sorunu çözdüğünü bilirsek, daha kalıcı bir öğrenim elde edebiliriz.

Javascript’te bir değeri değiştirdiğimizde o değeri ekrana yansıtmak için ilgili render fonksiyonunu tekrar çağırıyoruz. React’ta bu işlemi ayrı ayrı yapmak yerine direk useState kullanıyoruz. Hem değişken hem de fonksiyonu aynı anda oluşturuyor, default değerini giriyoruz.

React useState Kullanımı

İlk olarak import edip, projemize dahil ediyoruz. Sonrasında aşağıdaki gibi kullanıyoruz.

import { useState } from "react";
import "./App.css";

function App() {
  const [firstName, setFirstName] = useState('Hüseyin');
  return (
    <>
      <h1>I'm {firstName}</h1>
    </>
  );
}

export default App;

Yukarıdaki const [firstName, setFirstName] = useState(‘Hüseyin’) kullanımında firstName: değişken ismi, setFirstName: firstName değişkenini güncellerken kullanacağımız fonksiyonumuz ve useState(”) hooks’unu kullanıyoruz. Burada default değer olarak istediğimiz değeri verebiliriz. Ben kendi ismimi verdim.

Yukarıdaki örneği biraz geliştirip bir buton ekleyelim ve butona tıklandığında ismi değiştirelim.

import { useState } from "react";
import "./App.css";

function App() {
  const [firstName, setFirstName] = useState('Hüseyin');

  return (
    <>
      <h1>I'm {firstName}</h1>
      <button onClick={()=> {firstName('Yeni isim')}}>Change name</button>
    </>
  );
}

export default App;

Yukarıdaki kullanımda onClick={()=> {firstName(‘Yeni isim’)}} direk tanımlama yapıyoruz. Tabi pratikte bu çok efektif olamayabilir, o yüzden aşağıdaki gibi bir kullanımda mevcut.

import { useState } from "react";
import "./App.css";

function App() {
  const [firstName, setFirstName] = useState('Hüseyin');

  const handleChange = () => {
    setFirstName('Yeni isim');
  };

  return (
    <>
      <h1 onChange={handleChange}>I'm {firstName}</h1>
    </>
  );
}

export default App;

Yukarıda onChange={handleChange} ile handleChange() fonksiyonunu çağırıyoruz ve firstName’i ‘Yeni isim’ olarak güncelliyoruz. Aşağıda farklı kullanımda tanımladığımız bir array içindeki isimlerden birini random olarak çağırıp, firstName’i güncelliyoruz.

import { useState } from "react";
import "./App.css";

function App() {
  const [firstName, setFirstName] = useState('Hüseyin');
  const names = ["Ali", "İbrahim", "Mirza", "Fatma", "Meryem", "Yasemin"];

  const handleChange = () => {
    setFirstName(names[Math.floor(Math.random() * names.length)]);  
  };

  return (
    <>
      <h1 onChange={handleChange}>I'm {firstName}</h1>
    </>
  );
}

export default App;

useState değeri yukarıda string olarak tanımlanmıştı ancak bu veri türünü array veya obje olarak da verebilirsiniz.

const [names, setNames] = useState(["Ali", "İbrahim", "Mirza", "Fatma", "Meryem", "Yasemin"])

const [userInfo, setUserInfo] = useState({username: "Huseyin", lastName: "Eskan"})

return (
    <>
      <h1>I'm {userName.firstName} {userName.lastName}</h1>
    </>
  );

React useState’de Obje Kullanımı

Aşağıdaki örnekte tanımladığımız userInfo useState’i üzerinden bir örnek gösterilmiştir. Bir obje üzerinden nasıl işlem yapılır hep beraber görelim.

const [userInfo, setUserInfo] = useState({username: "Huseyin", lastName: "Eskan"})

const handleChange = () => {
  setUserInfo({
    ...userInfo, //Mevcut state değerlerini korur (ör: lastName)
    firstName: "Ali" //Sadece firstName'i değiştiriyoruz.
  });
};

return (
    <>
      <h1>I'm {userName.firstName} {userName.lastName}</h1>
      <button onClick={handleChange}>Change name</button>
    </>
  );

React useState’de Boolen Kullanımı

Bir boolen değeri kullanmamız gerektiğinde kolaylıkla tanımlama yaparak, ilgili yerlerde güncelleyerek de kullanabiliriz. Boolen değerler daha çok karşılaştırmalarda kullanılıyor ve aşağıdaki örnekte de bunu görebilirsiniz.

const [show, setShow] = useState(true);

return (
    <>
      <h1>
        {show ? <span>İfade True</span> : <span>İfade False</span>}
      </h1>
    </>
  );

React useState Kullanımında Dikkat Edilmesi Gereken Bir İpucu

Bir state değeri değiştirildiğinde ilgili component tekrar render edilir. Aşağıdaki App component’inde araya yazdığımız console.log(“App component’i render edildi”); ifadesi her butona basıldığında App() componentinin tekrar render edildiğini görebilirsiniz. Bunun farkında olmak daha verimli kod yazmada yardımcı olacaktır.

Bu küçük uygulamalarda sorun olmayabilir ancak bir component’in içinde yüzlerce kod var ise işte uygulamamız burada yavaşlayabilir. Bu noktada

Bir state’in setFunction’ınını kullanarak değerini değiştirdiğimizde ilgili state’in bulunduğu component tekrar render edilir.

import { useState } from "react";
import "./App.css";

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

  const artir = () => {
    setCount(count + 1);
  };

  const azalt = () => {
    count > 0 ? setCount(count - 1) : null;
  };

  console.log("App component'i render edildi");

  return (
    <>
      <h1>{count}</h1>
      <button onClick={artir}>Artır</button>
    </>
  );
}

export default App;

Yukarıdaki örnekte 2 buton ile count değeri artırılıp, azaltılıyor. 0’dan küçük ise – değerlerine inmemesi için count > 0 ? setCount(count – 1) : null; kodu yazılmıştır.

React useState Asenkron Kullanım

Yukarıdaki örnek üzerinden önemli bir şeyi de ifade etmek istiyorum. Burada count değerini artırmak istediğimizde setCount(count + 1); fonksiyonu çalıştırılıyor ve değer 1 artırılıyor. Ancak bu fonksiyonu 2 defa çalıştırırsak ne olur bir bakalım.

const artir = () => {
    setCount(count + 1); // çalışacak
    setCount(count + 1); // çalışmayacak
  };

return (
    <>
      <h1>{count}</h1>
      <button onClick={artir}>Artır</button>
    </>
  );

Birince setCount(count + 1); fonksiyonu çalışacak ancak 2.fonksiyon çalışmayacaktır. Bunun sebebi React’ta setState çağrıları hemen state’i güncellemez. Bunun yerine, React bu güncellemeleri sıraya koyar ve topluca işler. Bunu test etmek isterseniz aşağıdaki gibi setCount(count + 1); çağrısından hemen sonra console.log(count); ifadesini çağırırsak, eski değeri kolaylıkla görebiliriz.

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

const artir = () => {
  setCount(count + 1);
  console.log(count); // Bu durumda eski değeri göreceksiniz
};

return (
    <>
      <h1>{count}</h1>
      <button onClick={artir}>Artır</button>
    </>
  );

Bu Peki bunun çözümü nedir?

React’ta setState fonksiyonunu kullanırken iki farklı yöntem vardır.

  1. Doğrudan yeni değer vermek.
  2. Bir fonksiyon kullanarak önceki değere göre yeni değeri hesaplamak.

React’ta state güncellemeleri asenkron olabilir. Bu, bir state güncellemesinin hemen gerçekleşmeyeceği ve birden fazla güncellemenin ardışık olarak çağrılması durumunda doğru sonuçlar alamayabileceğimiz anlamına geliyor. Eğer mevcut state değerine bağlı olarak yeni bir state belirliyorsak, doğrudan state kullanmak yerine önceki değeri kullanmak daha güvenli olacaktır.

React’ın setState fonksiyonuna bir callback (geri çağırma) fonksiyonu geçirdiğimizde, bu callback’e verilen ilk argüman, her zaman önceki state değerini temsil eder. Bu sebep ile setState fonksiyonuna bir callback fonksiyonu tanımlarsanız, bu tanımladığımız fonksiyon değeri, state’in bir önceki değerini tutar.

const artir = () => {
    setCount((prevCount) => prevCount + 1); // çalışacak
    setCount((prevCount) => prevCount + 1); // çalışacak
  };

return (
    <>
      <h1>{count}</h1>
      <button onClick={artir}>Artır</button>
    </>
  );

Yukarıdaki kod çalışan koddur. prevCount ismini dilediğiniz başka bir isimde verebilirsiniz. Bu bir callback fonksiyonudur sonuçta.

Umarım state konusunu anladığım kadarıyla anlatabilmişimdir. Lütfen anlamadığınız, size karışık gelen kısımları veya eklemek istediklerinizi yorumlarda belirterek katkıda bulununuz.

Faydalandığım Kaynaklar

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.