State Tasarımı

React içinde state tasarımı kavramını, kullanım sınırlarını ve güvenilir uygulama biçimini öğrenin.

State Tasarımı, React ile etkileşim ve state çalışırken veriyi açık, öngörülebilir ve sürdürülebilir biçimde işlemek için kullanılan yaklaşımı açıklar. React bileşeni aynı girdiler için öngörülebilir bir arayüz ağacı üretmelidir; state yalnızca zaman içinde gerçekten değişen en küçük veriyi tutar.

Render sırasında yan etki oluşturmak ve türetilebilir veriyi ayrıca state içinde saklamak tutarsızlığa yol açar; dış sistem eşitlemeleri temizlenebilir Effect sınırında tutulmalıdır. İsimlendirme, küçük sorumluluklar ve görünür veri akışı; kodun yalnızca çalışmasını değil, anlaşılmasını da sağlar. Aşağıdaki örnek, konuyu küçük ve izlenebilir bir akış içinde gösterir.

Yaygın hata ve doğru yaklaşım

Girdi, çıktı ve hata sözleşmesini belirsiz bırakmak çağıran kodu kırılgan hâle getirir. Normal akış kadar başarısızlık davranışını da açıkça tasarlayın.

Sonuç

State Tasarımı, doğru sınırlar ve açık bir sözleşmeyle kullanıldığında React kodunun güvenilirliğini artırır. Önce doğruluğu kurun; ölçüm göstermeden karmaşık optimizasyona yönelmeyin.

State Tasarımı örneği

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(value => value + 1)}>Sayaç: {count}</button>;
}