SDTR
Published in

SDTR

Prop Drilling ve Context API

photo by Johannes Plenio

Selamlar,

ReactJS içerisinde veri akışı unidirectional yani tek yönlü ve component ağacının yukarısında bulunan state aktarımı bir parent component’ten, ağacın altlarında bulunan child componentlere props’ların aktarılması ile mümkün olmaktadır.

Burada ki sorun; arada kullanılan componentlerin gerekli değeri child componentlere taşımak için kullanılıyor olmasıdır. Bu durum özellikle geniş çaplı projeler için yapınını kontrol edilmesini zorlaştırmaktadır.

Kod üzerinden inceleyelim:

App componentimiz olduğunu ve iki ayrı componentimizin daha olduğunu varsayalım. App componenti içerisinden sadece DisplayFishCount isimli componenti çağırıyorum. DisplayFishCount componenti içerisinden de Button componenti çağıralım App componenti içerisinde tanımlamış olduğum state’e Button componenti içerisinden erişimi props ile sağlayabilirim.

Bu olaya prop drilling deniliyor.

Alternatif olarak,

Teknik olarak React uygulaması için state iletiminde arada gereksiz kullanılan componentlerin varlığı, ve takibi zorlaşan propslar sözkonusu olduğu için kötü yönetim / bad practice diyebiliriz. Aynı zamanda herşeyi tek component içerisinden yapmak kod kalitesi ve bakımı içinde yine iyi olmayacaktır.

Tarayıcıya gelip Button’a basıldığı zaman sayının artmasını sağlamak istersem, yani state’i güncellemek (sayı değerini arttırmak istersem) Button componenti içerisinden setFishCount fonksiyonuna ulaşmam gerekir. Bunun için setFishCount fonksiyonunu DisplayFishCount içerisine props ile gönderebilirim.

Yukarıda yazdığım gibi Button component içerisinden setFishCount fonksiyonuna erişim sağlanarak, ne zaman tıklama yapılırsa, sayı artacaktır. Ancak problem olarak setFishCount fonksiyonu App componenti içerisinde oluşturulup, DisplayFishCount üzerinden gelmiştir, burada DisplayFishCount componenti kullanılmıyor.

Kullanışlı değil ise ne yapalım?

(State Management)

Context API kullanımı ile aktarılmak istenen değerler global şekilde tutularak, direkt olarak kullanılması gereken componente aktarılmaktadır. Böylece gönderilmesi istenen state, component ağacı altındaki başka state’e props olarak gönderilmiyor.

Context api implementasyonu için, Context.js içeirisinde context oluşturalım. ( Burada kod organizasyonu için ayrıca oluşturulmuştur.)

Context nesnesi Provider ve Consumer adında iki component içermektedir. Erişilmek istenen state Provider içerisisine yazılır.

Context.Provider içerisinde yer alan value adında props bulunur ve buraya diğer componentler taradından erişilmek istenen değerler yazılr. Artık ulaşılmak istenilen değer için propsların kullanılmasına gerek kalmayaacktır.

Yukarıda gördüğümüz gibi useContext hook kullanımı ile de count yada setCount fonksiyonunu sarmalayarak propslara gerek kalmadan kullanabilmekteyiz.

Bu işlemler ile props drilling yapmadan uygulamayı daha sürdürülebilir hale getirmek mümkün olamktadır.

Umarım faydalı olmuştur. Teşekkürler.

(Demo kodunun olduğu Github Reposu için buradan bakabilirsiniz.)

(Referans aldığım video’ya buradan bakabilirsiniz.)

Sevgiler…

--

--

Yetenekli ve bilgili geliştiricilerden oluşan bir topluluk!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store