State, zaman içinde değişebilen ve UI'ın render edilmesi için bağlı olduğu herhangi bir veridir. State değiştiğinde, UI bunu yansıtmak için güncellenir. Bu, uygulamanızın herhangi bir anda "hafızası"dır.
✓ A counter value, a form's input text, a toggle (on/off)
✓ Whether a modal is open, the active tab, loading/error flags
✓ The logged-in user, items in a cart, fetched API data
✓ The current theme (dark/light), selected filters
function Counter() {
const [count, setCount] = useState(0); // `count` is state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* the UI is a function of state */}
</button>
);
}
Modern çerçevelerin temel fikri: UI = f(state). DOM'u manuel olarak güncellemezsiniz; state'i değiştirirsiniz ve çerçeve UI'ı eşleşmesi için yeniden render eder. Düğmeye tıklayın → count değişir → görüntülenen sayı otomatik olarak güncellenir.
State: changes over time, drives re-renders (count, user, isOpen)
Constants: never change (PI, config URLs) — not state
Derived: computed FROM state (fullName from firstName + lastName) — don't store separately
Her değişken state değildir — yalnızca değişen ve render edilen şeyi etkileyen veriler. Mevcut state'den hesaplayabileceğiniz değerler ayrı state olarak depolanmamalıdır (senkronizasyondan çıkma riski vardır).
Local/UI state → belongs to one component (input text, isOpen)
Global state → shared app-wide (user, theme, cart)
Server state → data fetched from an API (cached remote data)
URL state → in the address bar (filters, page number)
State'i "değişen ve UI'ı yönlendiren veriler" olarak anlamak, tüm frontend geliştirmenin temelidir.
Mental model UI = f(state), React/Vue/Angular'ın nasıl çalıştığını açıklar — state'i yönetirsiniz ve görünüm bunu takip eder.
Neyin olduğunu ve olmadığını tanımak (ve türetilmiş değerleri çoğaltmamak) bunu iyi yönetmenin ilk adımıdır; state yönetimindeki her şey bu kavram üzerine inşa edilir.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap