𝗥𝗲𝗮𝗰𝘁 𝗝𝘀 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗔𝗻𝘁𝗶𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀

Temiz React kodu yazmak akıllı bir state yönetimi gerektirir. Kötü state desenleri hatalara ve karmaşık kodlara yol açar.

Bu dört yaygın hatadan kaçının:

  1. İlgili verileri gruplandırın

Birlikte değişen değerler için ayrı state hook'ları oluşturmayın.

Şunun yerine:

  • const [x, setX] = useState(0);
  • const [y, setY] = useState(0);

Bir nesne (object) kullanın:

  • const [position, setPosition] = useState({ x: 0, y: 0 });

Bu, güncellemelerinizi temiz ve düzenli tutar.

  1. Çakışan state'lerden kaçının

Birden fazla boolean değer aynı süreci takip ettiğinde hatalar oluşturursunuz.

Şunlara sahip olmak yerine:

  • isSubmitting
  • isSubmit

Tek bir durum (status) dizesi kullanın:

  • status: 'TYPING'
  • status: 'SUBMITTING'
  • status: 'SUBMITTED'

UI mantığınızı bu tek doğruluk kaynağından (single source of truth) türetin.

  1. Gereksiz state'leri kaldırın

Eğer bir değeri render sırasında hesaplayabiliyorsanız, onu state içine koymayın.

Şunları saklamayın:

  • firstName
  • lastName
  • fullName

Sadece ad ve soyadı saklayın. Tam adı anlık olarak hesaplayın:

  • const fullName = firstName + " " + lastName;

Ayrıca, prop'ları asla state içinde saklamayın. State yalnızca bir kez başlatılır. Eğer prop'unuz değişirse, state güncellenmeyecektir. Prop'u doğrudan kullanın.

  1. Veri çoğaltmayı bırakın

Aynı veriyi iki farklı state içinde saklamayın.

Bir görev listeniz ve seçili bir göreviniz varsa, tüm görev nesnesini her iki yerde de saklamayın. Bu, güncellemeleri zorlaştırır.

Bunun yerine:

  • Görev listesini saklayın.
  • Sadece seçili olan selectedTaskId değerini saklayın.
  • Render sırasında o ID'yi kullanarak listeden görevi bulun.

Bu, seçili görevinizin listenizdeki en güncel verilerle her zaman eşleşmesini sağlar.

Kaynak: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9