React'de state kavramı nedir?

spacewizard · 18 Ocak 2024

Arkadaşlar, öncelikle hayırlı günler herkese. Sorum şu: Temel React öğrenmeye çalışıyorum, başlarda iyi güzel ama bir noktadan sonra hooklar, stateler bilmem neler havada uçuştu, JS bilgimiz var diye başladık, karşıma JS'nin farklı bir yöne doğru evrim geçirmiş hali gibi bir şey çıktı, dil paradigmaları pek tanıdık gelmedi.
Benim anlayamadığım nokta, useState() metodu nedir ? ne işe yarıyor bu metod?, hook falan diyerek bir şeyler bir şeyler anlatmışlar hiçbir şey anlamadım, chatGPT zaten daha kötü anlatıyor, google'da da elle tutulur bir bilgi bulamadım, "buton" örneği verip durmuşlar. Kardeşim ne yapayım ben useState'i o zaman, o komponent içerisinde butonla bir değerdeki sayıyı artırıp ekrana yazdırmayı bu useState'i kullanmadan da yaparım

.
Eğitim içeriklerinde ben sadece ekrandaki sayıyı bir artırıp bir azaltan bir buton görebiliyorum, başka bir şey göremiyorum, yani olayın mantığını kavrayamadım, useState metodu komponentler arasında veri taşıma yığını sorununu aşmak için mi kullanılıyor? Bunu her anlatan bir anda konudan konuya geçtiği için ne ne için kullanılıyor onu da hiç anlayabilmiş değilim.

Zurnadürüm · 18 Ocak 2024

UseState bir componentin değerini tutmana yarıyor. Diyelim ki bir tane butonun var ve bu butona bastıkça ekranda sayıların birer artmasını istiyorsun. Bu zaman bir tane useState() hooku çağırıyorsun ve ta da! Normal JS ile uzun yazman gereken kodu tek satırla hallediyorsun. Yarattığın state ile bir butonda onClick eventına bağladığın zaman her buton basdığında state değişecek ve sayı artmaya başlayacak.

JavaScript:

import React, { useState } from "react";

function App() {
  const [sayi, setSayi] = useState(0);

  const arttir = () => {
    setSayi(sayi + 1);
  };

  return (
    <div>
      <h1>Sayi: {sayi}</h1>
      <button onClick={arttir}>Arttir</button>
    </div>
  );
}

export default App;

Burada her butona bastığında sayı birer artacak.

Hook dediğin şeyler ise React kütüphanesinde metotlar diyebiliriz. Site render olunurken gerekli kolaylıkları sağlayan metotlar içeriyor. En popülerleri, useState(), useReducer(), useRef(), useEffect() vs.

spacewizard dedi:
O komponent içerisinde butonla bir değerdeki sayıyı artırıp ekrana yazdırmayı bu UseState'i kullanmadan da yaparım .

Yaparsın ama o zaman React kullanmanın anlamı kalmaz.

spacewizard dedi:
Eğitim içeriklerinde ben sadece ekrandaki sayıyı bir artırıp bir azaltan bir buton görebiliyorum, başka bir şey göremiyorum

En basit örneği o çünkü. Genelde pratikte inputları API'ye göndermeden önce tutmak için kullanılır, sepet özelliği gibi işlevler için kullanılır. Buton örneği en basiti.

spacewizard · 18 Ocak 2024

Zurnadürüm dedi:
UseState bir componentin değerini tutmana yarıyor. Diyelim ki bir tane butonun var ve bu butona bastıkça ekranda sayıların birer artmasını istiyorsun. Bu zaman bir tane useState() hooku çağırıyorsun ve ta da! Normal JS ile uzun yazman gereken kodu tek satırla hallediyorsun. Yarattığın state ile bir butonda onClick eventına bağladığın zaman her buton basdığında state değişecek ve sayı artmaya başlayacak.

Merhaba, hook kavramını tam olarak sen söyleyince direkt anladım

.
hook kavramı bana benzetme olarak modül import etmek gibi geldi.
const [sayi, setSayi] = useState(0); burada descructuring yaparak react kütüphanesindeki useState() adlı bir metoda ya da nesneye iki farklı değer tanımlanmış. biri değerin kendisi diğeri'de değeri değiştirmek için atanan fonksiyon sanırım. Bu metod sadece string, number, dizi gibi bazı değerlerin durumlarını değiştirmeye mi yarıyor?

En basit örneği o çünkü. Genelde pratikte inputları API'ye göndermeden önce tutmak için kullanılır, sepet özelliği gibi işlevler için kullanılır. Buton örneği en basiti.

useState'ye atanan elemanlarda değiştirilme geçmişi ve en son atanmış değer mi tutuluyor?

Zurnadürüm · 18 Ocak 2024

spacewizard dedi:
Merhaba, hook kavramını tam olarak sen söyleyince direkt anladım .
const [sayi, setSayi] = useState(0); burada descructuring yaparak React kütüphanesindeki useState() adlı bir metoda ya da nesneye iki farklı değer tanımlanmış. biri değerin kendisi diğeri'de değeri değiştirmek için atanan fonksiyon sanırım. Bu metod sadece string, number, dizi gibi bazı değerlerin durumlarını değiştirmeye mi yarıyor?

Evet, öyle. Genel yapısı boyle.

JavaScript:

const [degisenVeri, setDegisenVeri] = useState("")

State içine array, object gibi karmaşık veri tiplerini de koyabiliyorsunuz.
Örnek:

JavaScript:

import React, { useState } from "react";

function App() {
 const [kisi, setKisi] = useState({
 ad: "John Doe",
 yas: 30,
 meslek: "Mühendis",
 });

 const guncelle = () => {
 setKisi({
 ...kisi,
 ad: "Jane Doe",
 yas: 31,
 meslek: "Doktor",
 });
 };

 return (
 <div>
 <h1>Kisi: {kisi.ad}</h1>
 <h2>Yas: {kisi.yas}</h2>
 <h3>Meslek: {kisi.meslek}</h3>
 <button onClick={guncelle}>Guncelle</button>
 </div>
 );
}

export default App;

Objenin içini ya input, ya da fetch ile API isteğinin cevabı ile doldurabiliyorsunuz.

spacewizard dedi:
useState'ye atanan elemanlarda değiştirilme geçmişi ve en son atanmış değer mi tutuluyor?

Array olarak tutarsan evet geçmişi de tutuyor.

JavaScript:

import React, { useState } from "react";

function App() {
  const [liste, setListe] = useState(["Elma", "Armut", "Çilek"]);
  const [listeGeçmişi, setListeGeçmişi] = useState([]);

  const ekle = () => {
    setListe([...liste, "Kiraz"]);
    
  };



  return (
    <div>
      <h1>Liste: {liste}</h1>
      <button onClick={ekle}>Ekle</button>
      
    </div>
  );
}

export default App;

Bu kodu çalıştırdığında listenin sonuna her buton bastığında "Kiraz" eklendiğini göreceksin. State güncellenirken eski verileri de silmiyor ve onlar da renderlanıyor.

spacewizard · 18 Ocak 2024

Örneklerin hepsini şöyle bir denedim sindirmek adına, şimdi zihnimde en azından gelecekte kullanılmak üzere bir patern meydana geldi.
Django'yu öğrenirken bu kadar çok zorlanmadım. okuduğum kitapta "Öğrenmesi kolaydır" diye bahsedilen bir js kütüphanesinde bu kadar zorlanmam anormal oldu

Genelde bir şeyler öğrenmeye çalışırken hepimizin ilk takıldı nokta zaten dil bariyerleri oluyor.

Zurnadürüm · 18 Ocak 2024

spacewizard dedi:
Django'yu öğrenirken bu kadar çok zorlanmadım. Okuduğum kitapta "Öğrenmesi kolaydır" diye bahsedilen bir JS kütüphanesinde bu kadar zorlanmam anormal oldu

Ben Django öğrenemiyorum kötü yapılandırma yüzünden. NextJS çok daha kolay geliyor bana ve filsystem routing işimi kolaylaşdırıyor.
React öğrenmesi en kolay kütüphanelerden biridir. Fakat ustalaşmak zaman istiyor.

RaSGooL · 18 Ocak 2024

Asıl olay render mekanizması. React virtual dom üzerinden çalışıyor. React ile oluşturduğun app, client tarafında render olmaya başlar. CSR, Virtual DOM vs araştırman lazım.

Şuan React'ın çalışma mekanizmasında takılmışsın ki bu çok normal. Herkes bir noluyo ya demiştir bu hook konusunda. Tüm olayın render edebilmeyi sağlaması üzerine kurulu aslında.
Sen şimdi güzel güzel component oluşturup html içeriklerini dönüyorsun. ReactDom paketi ile bu componenti DOM üzerinde render ediyor. Fakat senin componentinde bir değer değişti diyelim. Fakat sen bunu render etmiştin? Değer değiştiği için tekrar render olmasını ve ekranda güncel veriyi görmek istiyorsun. Counter örneğini bu yüzden sıkça görüyoruz. Sürekli render olan bir içerik var.
React tüm jsx tarafındaki render olayını kendi yönetiyor. Bizim bir şey yaptığımız ettiğimiz yok. Ama sen şimdi Component içinde bir şey değiştirirsen ve bunun render olmasını istiyorsan, React'ı bilgilendirmen lazım. Bilgilendir ki adam tekrar gerekli yerleri render etsin. Şimdi en sık yapılan hatalardan başlayalım.

JSX:

const Counter = () => {
    let counter = 0
    setInterval(() => {
        ++counter
        console.log("From interval: ", counter)
    }, 1000)

    console.log("From component: ", counter)
    return (
        <div>{counter}</div>
    )
}

Diyelim bu tarz bir component yaptın. Ekranda göreceğin tek şey koca bir sıfır. Dev tooldan konsolu açtığında, loglarda 1 adet "From Component: 0", ve her saniye atılan "From Interval: " logunu göreceksin.
Peki neden? Çünkü senin değişkenin değiştiğini React nerden bilsin? Bir şekilde reactDom senin componentini render ederken arka plana hook atması lazım ki senin değişkenlerinin değiştiğini anlayabilsin. Bu yüzden useState var. useState iki değer döndürür. İlki; value, diğeri ise set fonksiyonu. set fonksiyonu sadece value set etmek için değil arka planda react'a bu componenti ve altındaki tüm childtree componentleri render etmesini sağlar.

Daha detaylı yazmak isterdim de çok uzuyor ve detaylarda boğulmaya başlayacağız gibi.

JSX:

const Counter = () => {
    const [counter, setCounter] = useState(0)
    
    useEffect(() => {
        const id = setInterval(() => setCounter(x => x+1), 1000)
        
        return clearInterval(id)
    }, [])
    
    return (
        <div>{counter}</div>
    )
    
}

React'de state kavramı nedir?

Ayrıntılı düzenleme

spacewizard

Centipat

Zurnadürüm

Megapat

spacewizard

Centipat

Zurnadürüm

Megapat

spacewizard

Centipat

Zurnadürüm

Megapat

RaSGooL

Kilopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz