Context API Nedir? Context API'yi Anlamak - React JS

Selam, bu yazımda sizlere Context API'dan bahsedeceğim. Ayrıca Redux ve Context API'ın farkı nedir, ne zaman Redux ne zaman Context API kullanmalıyız kısaca bundan da bahsetmeye çalışacağım.

Context API Nedir?

Kendi dökümanlarına göre; "Context, her seviyede manuel olarak prop'ları aktarmak zorunda kalmadan component tree üzerinden veri geçirmenin bir yolunu sağlar."

Bunu bir örnek yardımıyla açıklamaya çalışayım. Beş component'den oluşan bir component tree yapısı hayal edin. Ana bileşenden gelen veriler yalnızca 5. component'de gerekli olsun. Bu durumda, 5. componente ulaşana kadar her component'den diğerine prop olarak veri aktarmanız gerekecektir (buna prop drilling denir) .

Component sayısı arttıkça tüm bu süreç oldukça sıkıcı ve karmaşık hale gelmeye başlar. Artık kullanılması da neredeyse imkansız hale gelir. Biz de Context API'yi kullanarak, ihtiyacımız olan veriyi/verileri "global" olarak tanımlarız ve verileri her seviyede prop olarak geçirmeden bir component tree arasında iletebiliriz.

Neden Kullanırız?

Context API kullanmak, gerekli verilerin her seviyeye prop olarak aktarılması gibi sıkıcı ve karmaşık süreci azaltır. Component'lerin yeniden kullanılmasını biraz zorlaştırsa da yine de iş görür.

Redux Nedir?

Kısaca Redux, genellikle React ile birlikte kullanılan bir state yönetim kütüphanesidir. Redux ile uygulamanızın state'i "global" bir store'da tutulur ve her component bu store'dan ihtiyaç duyduğu herhangi bir state'e erişebilir.

Bu tanımdan da anlayabileceğiniz üzere Redux ve Context API birbirine çok benzer, bu yüzden ikisi birbirinin alternatifidir diyebiliriz.

Peki biz hangisini tercih etmeliyiz Redux mı yoksa Context API mı?

Redux vs Context API

Eğer orta ölçekli bir projeniz varsa ve sadece global bir state yapısı kurmak, uygulamanın alanlarını belirlemek istiyorsanız Context API kullanmak daha faydalıdır diyebiliriz.

Ancak daha büyük bir projemiz varsa; Async veri dinleme, çok sık yapılan API istekleri, sürekli veri dinleyen componentleriniz varsa, çok detaycı bir state yapısı oluşturacaksak Redux kullanmamız daha iyi olabilir.

featured image: pixabay.com - Ylanite