React props ve state farkı: çalışan sayaç örneğiyle öğren

React’te props, bir bileşene dışarıdan verilen bilgidir; state ise bileşenin render’lar arasında tuttuğu durumdur. Props’u bileşenin içinde değiştirmezsin. Ekrandaki yerel durumu değiştirmek için state güncelleme fonksiyonunu kullanırsın.

Aynı kartta hangisi props, hangisi state?

Bir çalışma kartı düşün. Üst bileşen karta “HTML” konu adını verir; bu bilgi props’tur. Kullanıcı “Deneme ekle” düğmesine bastığında artan sayı ise bu örneğin yerel state’idir. Props zaman içinde üst bileşen tarafından farklı verilebilir; “props hiç değişmez” demek doğru değildir. Değiştiremeyen taraf, onu okuyan alt bileşendir.

Çalışan örnek: birbirinden bağımsız iki sayaç

Bu JSX örneğini çalışan bir React projesindeki App.jsx dosyasına koy. Doğrudan düz bir HTML dosyasında açılmaz; React ve JSX’i işleyen proje ortamı gerekir. İki kartın da başlangıç sayısı sıfırdır.

import { useState } from "react";

function CalismaSayaci({ konu }) {
  const [deneme, setDeneme] = useState(0);

  return (
    <section style={{ padding: 24, border: "1px solid #64748b" }}>
      <h2>{konu}</h2>
      <p aria-live="polite">Deneme sayısı: {deneme}</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
        <button type="button" style={{ minHeight: 44 }}
          onClick={() => setDeneme(onceki => onceki + 1)}>
          Deneme ekle
        </button>
        <button type="button" style={{ minHeight: 44 }}
          onClick={() => setDeneme(0)}>
          Sıfırla
        </button>
      </div>
    </section>
  );
}

export default function App() {
  return (
    <main style={{ display: "grid", gap: 16, padding: 16 }}>
      <CalismaSayaci konu="HTML" />
      <CalismaSayaci konu="CSS" />
    </main>
  );
}

İlk karttaki düğmeye iki kez bas: HTML kartında 2, CSS kartında 0 görmelisin. İkinci karttaki düğmeye bir kez basınca sonuç 2 ve 1 olur. Aynı bileşen fonksiyonunu kullanmaları, iki örneğin state’ini ortak yapmaz.

Neden sıradan bir değişken kullanmadık?

Fonksiyonun içine let deneme = 0 yazmak bu ihtiyacı karşılamaz. Yerel değişkeni değiştirmek React’e yeniden render isteği vermez; sonraki render’da fonksiyon gövdesi yeniden çalışır. useState ise değeri render’lar arasında tutar ve setter ile güncellemeyi bildirir.

Önceki sayıya bağlı artış için fonksiyon biçimini kullandık: onceki => onceki + 1. Böylece güncellemenin önceki bekleyen değere göre hesaplandığını açıkça ifade ediyoruz.

Sık yapılan iki hata

deneme++ yazmak: React’in state güncelleme mekanizmasını kullanmaz. Değeri doğrudan değiştirmek yerine setter çağır.

onClick alanında fonksiyonu hemen çağırmak: onClick={setDeneme(1)} yerine bir olay fonksiyonu ver. Örnekteki ok fonksiyonu, güncellemeyi tıklama anına bırakır.

Sıra sende: ekranı açmadan tahmin et

1. HTML kartına üç kez, CSS kartına bir kez basarsan hangi sayılar görünür?
2. Yalnız HTML kartındaki Sıfırla düğmesine basınca ne olur?
3. Üst bileşendeki konu="HTML" ifadesini konu="JavaScript" yaparsan sayacı artırmış olur musun?

Kontrol: önce 3 ve 1; sıfırlamadan sonra 0 ve 1. Konu metnini değiştirmek bir sayaç artırma işlemi değildir. Örnekte kalıcı depolama yoktur; sayfayı yeniden yüklemek sayaçları sıfırlar. Kod düzenlerken geliştirme ortamının state koruma davranışı farklı olabilir.

Sonraki adım ve kaynaklar

Olay fonksiyonları karışıyorsa HTML, CSS ve JavaScript rehberine dön. Hesaplama ile kullanıcı etkileşimini ayırmak için JavaScript not ortalaması örneğini incele.

Teknik başvuru: React — Bileşene props aktarmak ve React — Bileşenin belleği: state.

Atlas, platformun yapay zekâ destekli öğrenme asistanıdır. Bu yazıdaki şema, sayaç örneği ve görevler bu seri için özgün olarak hazırlanmıştır.