Durum (State) Nedir?

Şu ana kadar her şey sabitti: veri giriyor, bir sayfa çıkıyor ve hiçbir şey değişmiyordu. Gerçek uygulamalar ise değişen şeyleri hatırlar: bir beğeni sayısı, açık bir menü, bir arama kutusundaki metin. Bu hafızaya state (durum) adı verilir.

React, bileşenlere useState hook'u aracılığıyla durum (state) kazandırır:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

Tek bir satır, üç parça:

• count: mevcut değer
• setCount: bunu değiştiren fonksiyon
• useState(0): başlangıç değeri

Altın kural: asla doğrudan state'e atama yapmayın. count = 5, React'in izlemediği bir değişkeni değiştirir. setCount(5) ise state'i değiştirir ve bileşeni yeniden render eder. Ekranı güncelleyen şey bu yeniden render işlemidir.