{"id":10375,"date":"2025-01-23T04:30:13","date_gmt":"2025-01-23T01:30:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-durum-yonetimi-gelistirici-rehberi\/"},"modified":"2025-01-23T04:30:13","modified_gmt":"2025-01-23T01:30:13","slug":"reactte-durum-yonetimi-gelistirici-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-durum-yonetimi-gelistirici-rehberi\/","title":{"rendered":"React’te Durum Y\u00f6netimi: Geli\u015ftirici Rehberi"},"content":{"rendered":"

<\/p>\n

React’te Durum Y\u00f6netimi: Geli\u015ftirici Rehberi<\/p>\n

React uygulamalar\u0131n\u0131n karma\u015f\u0131kla\u015ft\u0131k\u00e7a, verilerin nas\u0131l y\u00f6netilece\u011fi b\u00fcy\u00fck \u00f6nem kazan\u0131r. Durum y\u00f6netimi, uygulaman\u0131z\u0131n verilerini tutarl\u0131 ve tahmin edilebilir bir \u015fekilde y\u00f6netmenizi sa\u011flar. Bu rehberde, React’te durum y\u00f6netimini ele alaca\u011f\u0131z ve farkl\u0131 yakla\u015f\u0131mlar\u0131 inceleyece\u011fiz. Ba\u015flang\u0131\u00e7 seviyesinden ileri seviyeye kadar her geli\u015ftiricinin faydalanabilece\u011fi bilgiler bulacaks\u0131n\u0131z.<\/p>\n

Temel Kavramlar<\/h2>\n

\u00d6ncelikle, React’te durumun ne oldu\u011funu anlamal\u0131y\u0131z. Durum, uygulaman\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturan verilerdir. \u00d6rne\u011fin, bir sayac\u0131n de\u011feri, bir giri\u015f alan\u0131ndaki metin veya bir \u00fcr\u00fcn listesidir. Bu veriler de\u011fi\u015fti\u011finde, aray\u00fcz de g\u00fcncellenir. K\u00fc\u00e7\u00fck uygulamalarda durum y\u00f6netimi basit olabilir, ancak uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e durum y\u00f6netimini d\u00fczg\u00fcn bir \u015fekilde y\u00f6netmek olduk\u00e7a \u00f6nemli hale gelir. Ak\u0131ll\u0131ca planlama yapmak, daha sonra ba\u015f\u0131n\u0131za gelebilecek sorunlar\u0131 \u00f6nlemenize yard\u0131mc\u0131 olur.<\/p>\n

useState Hook’u<\/h2>\n

React’in yerle\u015fik useState<\/code> hook’u, basit durum y\u00f6netimi i\u00e7in idealdir. Bu hook, bir bile\u015fen i\u00e7indeki durum de\u011fi\u015fkenini ve bunu g\u00fcncelleme fonksiyonunu d\u00f6nd\u00fcr\u00fcr. A\u015fa\u011f\u0131daki \u00f6rnekte, bir sayac\u0131n durumunu y\u00f6netmek i\u00e7in useState<\/code>‘i nas\u0131l kullanabilece\u011finizi g\u00f6rebilirsiniz:<\/p>\n

\nimport React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    
\n      
Sayac: {count}<\/p>\n