React ile state yönetimi nasıl yapılır?

React ile State Yönetimi

React\'te state yönetimi, bileşenlerin durumunu (state) yönetmek için kullanılır. Aşağıda temel yöntemler ve kurallar sıralanmıştır.

1. Yerel State Yönetimi

Yerel state, bir bileşenin kendi içinde yönetilen durumu ifade eder. Genellikle `useState` kancası ile kullanılır.

• useState Kancası: Bileşen içinde bir state değişkeni ve bu değişkeni güncellemek için bir fonksiyon döner.
• Örnek:

          const [count, setCount] = useState(0);
          

2. Props ile State Yönetimi

Bir bileşenden diğerine veri aktarmak için props kullanılır.

• Bileşenin durumu, parent bileşen tarafından yönetilir.
• Child bileşende props ile gelen state değerlendirilebilir.

3. Global State Yönetimi

Uygulamanın daha geniş bir alanında state yönetimi yapmak için bazı kütüphaneler tercih edilebilir:

• Context API: React’in kendi iç yapı taşlarından biridir. Global state paylaşımını sağlar.
• Redux: Daha büyük uygulamalarda karmaşık state yönetimi sağlar. Tek yönlü veri akışını kullanır.
• MobX: Reaktif programlama yapısına sahiptir, kolay kullanımı ile dikkat çeker.

4. Performans Optimizasyonu

State güncellemeleri bileşenleri yeniden render edebilir. Bunun önüne geçmek için:

• useMemo ve useCallback: Performansı artıran kancalardır.
• Bileşenleri gerektiğinde yeniden render etmek için React.memo kullanabilirsiniz.

Sonuç olarak, React uygulamalarında state yönetimi, durumu etkili bir şekilde yönetmek için kritik öneme sahiptir. Hangi yöntemin kullanılacağı uygulamanın gereksinimlerine bağlıdır.