0:01 merhaba arkadaşlar bugünkü dersimizde use state ve use effect hookuslarından özelliklerinden bahsedeceğiz arkadaşlar use state nasıl kullanılır use effect nasıl kullanılır bunların örneklerini yapmaya çalışacağız birlikte şimdi ben bunun için yeni bir proje oluşturdum rn use state entry use effect diye bunları sizinle paylaşacağımı ifade etmiştim zaten buradan uygulamaları takip edebilirsiniz eee bir de yönlendirme işlemlerimi gerçekleştirmek için arkadaşlar tane sayfa oluşturdum ana sayfa use effect sayfası use state use state örneğimiz burada yer alacak use effect örneğimiz burada yer alacak ana sayfadan da yönlendirmemizi bir iki tane buton koyup örnekleri yönlendirmemizi göreceğiz arkadaşlar appjsm için de
0:48 gerekli React Navigation işlemlerini gerçekleştirdim bunları iki önceki dersimizde ifade etmiştim kendiniz yapabilirseniz çok daha uygun olacaktır ekrandaki kısımları görüyorsunuz zaten biri ana sayfamız biri U state sayfamız bir de use effect sayfamız var bunlara verdiğim isimler var proje başlatıldığında ana sayfadan başlatılacak şu an ana sayfa bomboş gördüğünüz gibi şu yazıyı siliyorum ve buraya normal butonlarımdan buton eklemek istiyorum arkadaşlar title bu state örnek olsun bunun adı bu butonumun adı ve on yapıldığında er function koyuyoruz
1:33 buraya ve diyoruz ki arkadaşlar şunun içerisine bir süslü parantezin içerisine navigation yazalım navigation navigation no navigate süstü parantezimizi açtık ve dedik ki sen use state değil mi şuradan bakalım doğru yazalım evet use state arkadaşlar state sayfasına gideceksin şuradan kapatmanızı unutmayalım peki bir tane butonumuzu yaptık altına bir buton daha koyuyorum arkadaşlar ve use effect
2:20 örnek diyorum buna da sen de use effect sayfasına gideceksin öncelikle projemi başlatayım ve arkadaşlar butonlarımın çalışıp çalışmadığını görüntüleyeyim npx Expo Start yazıyorum proje klasöründe olmanız gerektiğini unutmayın a harfine bastım ve Android cihazımıza gönderiyorum bir yeniden yükleme yapalım en son projemiz görünüyor r harfi ile yeniden yükleme yaptım iki tane butonumun olduğu bir sayfanın gelmesini bekliyorum şu an
3:17 tabii yeniden proje yollamalarda maalesef böyle sıkıntılar çıkartıyor hemen burada expo'yu tekrar kaldırıp kuracağım iç içe birçok proje olduğu için böyle yapıyor arkadaşlar aslında tekte proje yapmış olsak daha düzgün çalışabiliyor kaldırdık ve tekrar Android'e gönder diyorum kurulmasını bekliyorum evet use state örnek gördüğünüz gibi çalışıyor use state sayfasına gitti use effect örnek bu da çalışıyor tamam güzel
4:04 burada herhangi bir şey yapmayı planlamıyorum bu sadece yönlendirme için hem de hatırlama için yaptığımız bir işlemdi ben artık use state sayfasına geçiş yapıyorum use state nedir ne için kullanılır öncelikle bunlara react react native de hooks deniyor arkadaşlar bu özelliklere use state bir bileşenin eee durumunu takip etmek için kullanılıyor veya işte şöyle ifade edebilirim bir değişkenin de durumunu takip etmek için kullanılıyor diyebilirim eee burada bileşen kelimesi daha fazla tercih ediliyor nasıl yani işte bir başlangıç değeri belirleniyor onu sonra değiştirme isteği duyuyor isek bununla alakalı yapabileceğimiz süreçleri planlamaları eee use state eee özelliğiyle gerçekleştiriyoruz arkadaşlar mesela küçük bir örnek olarak
4:50 burada use state'in bir eee buton koyacağız bir butonla sayıyı artırma ve azaltma işlemi yapmayı planladığımızı düşünelim butona bastık artır butonuna bastıkça artacak e azalt butonuna bastığımızda azaltacak bir özellik planlıyoruz diyelim bunun için arkadaşlar öncelikle şuraya şöyle kalsın bu başlık olarak kalsın bu state kullanımı değil güzel bunun altına arkadaşlar bu arada bunu bir vi içine alayım ki ortalayabilme durumum olsun sen de burada olsun güzel
5:36 tamam güzel şimdi ne dedik use state date nasıl oluşturuluyor hemen şurada gösterelim arkadaşlar diyoruz ki const ve bir süslü parantez açıyoruz su parantezimize diyoruz ki sayaç mesela sayaç sayaç tamam bir sayacımız olacak ismi sayaç olacak sonra bu sayacı ayarlamak istediğimizde set sayaç ifadesini kullanacağız güzel eşittir use state bakın bunu buradan seçersek kendisi şuraya otomatik olarak eee use state'i import edecek arkadaşlar gördüğünüz gibi eğer elinizle yazmaya devam ederseniz kendinizin bunu bu şekilde import etmeniz gerektiğini gerektiğini unutmayınız arkadaşlar bitti
6:23 mi bitmedi tabii ki neden çünkü BU State'in kullanımında böyle bir durum var nedir bu durum peki bu başlangıç değeri verme yani bizim bir sayaş diye bir değişkenimiz var gibi düşünelim bileşenimiz ama değişken diyelim bunun başlangıç değeri 0 olsun ve uygulama içerisinde de gerek butona basarak gerekse başka bir yerden tetiklenerek yani bir işlem gerçekleştiğinde değişsin diyerek arkadaşlar ne yapabiliyoruz tetikleme yoluyla ya da işte eee mesela use effect'le birlikte kullanabiliriz use effect'le olan bir değişim sayacımı değiştirsin gibi de diyebiliriz şimdi use effect'i görmedik başka bir tetikleme yoluyla nedir bu işte butona basıldığında butona basıldığında sayacı tekrar ayarla saycı bir artır sayacı 5
7:10 yap sayacı 10 yap da diyebilirsiniz arkadaşlar işte bu başlangıç değerini değiştirmek için kullanacağız peki şuraya geldim ve buraya bir buton oluşturmak istiyorum tamam butonuma bir title verelim arkadaşlar title eşittir bu arada şuraya buton ekli olmadığı için tabii ki bu tamamlamalar çıkmıyor title gördüğünüz gibi şimdi çıktı ve arter olsun bu on pressıldığında ise basıldığında ise ne yapsın
7:55 arkadaşlar şimdi diyoruz ki set hım burada şöyle bir şey var tabii basıldığında şöyle süslü parantez içerisine yazalım setç tamam sayç + 1 ses sayaç fonksiyonu çalışsın ve bu bu da ne yapsın sayacı bir artırsın dedik arkadaşlar güzel bunun altına bir buton daha koymak istiyorum kopyaladım bu da azalt olsun azalt şu da ne olacak tabii ki azaltmak için -1 olacak arkadaşlar hım peki tamam artırdık
8:40 azalttık bunu bir de görüntüleyebilmemiz lazım o zaman buraya bir de ne yapalım arkadaşlar tekrar şöyle yine bir vi ekleyeyim vivin içerisinde bir text olsun ve bu tekstin içerisinde de arkadaşlar neyimiz olsun sayı eşittir sayaç şimdi bir bakalım nasıl bir şey oldu use effect'e tıkladım yanlışlıkla use state'e tıkladım bakın artır dedikçe şurayı görüyorsunuz artırıyor azalt dedikçe azaltıyor peki state'in en kolay en basit en anlaşılır örneklerinden bir tanesiydi şuna sadece şöyle küçük bir
9:27 dokunuş yapalım arkadaşlar style eş stylus nokta metin diyeyim bununla aynısını arkadaşlar şuna da söyleyeyim ve aşağıya da gelip metnimizi tanımlayalım diyelim ki font size 2 nokta işte ne olsun arkadaşlar 24 margin 2
10:17 no 15 olsun bunlar ve bir de şu viverimize de bir de style verelim arkadaşlar align items 2 no center bunu da yerelde yazdım bunları ara ara görebilelim tekrar istiyorum o yüzden aynısını da alttaki sayıcıma da yapıştırdım geldim bakın büyüttüm ortaladım başka bir şey yapmadım mevcut durumu neydi sıfırdı arkadaşlar başladığında 0 olarak karşımıza geliyor artır dedikçe durumunu güncellemek için kullandığımız durumunu işte butonla tetikliyoruz mesela bu
11:03 güncellemek için kullandığımız bir bileşen bir özellik diyebiliriz buna şimdi gelelim use effectımına arkadaşlar use effect kullanımında da bu sayaç olayımızı biraz genişletelim ne yapalım kendi saysın durdurduğumuzda da durdursun sıfırlama yapabilelim yani böyle biraz daha gelişmiş bir eee bileşen gelişmiş bir özellik ekleyebilme durumumuz olsun arkadaşlar şuraya geliyorum şu başlık kısmını direkt buradan kopyalayıp alayım arkadaşlar bakın 3 tane kapatma viwi hariç geri kalan hepsini aldım kapatma viwi kalacak şunu silmiyorum şuradaki vivleri siliyorum ve şuraya da
11:48 use efekt kullanımı olarak başlığımı atıyorum nasıl bir şey oldu bir görelim bakın use effect kullanımı ortaya geldi gördüğünüz gibi biraz küçük değil mi neden şurada metin tanımı değil hemen buraya da bir metin 2 nokta f son size 24 olsun tamam şimdi arkadaşlar ne demiştik bir use effect'ten bahsedeceğiz peki use effect ne işe yarıyor use effectte bir yine özelliğin bir bileşenin durumunu otomatik olarak işte tetikleme yapıldığında ne olacağını belirlemenize
12:33 yarıyor bir de şöyle bir şey söyleyebilirim bu ne zaman olacak android'de veya işte mobil programlamarda programlarda yaşam döngüsü denilen bir süreç var yani şöyle program ilk açıldığında ne olacak program kapatılıp açıldığında ne olacak program arka plana atılıp geri geldiğinde ne olacak gibi süreçler var arkadaşlar işte resume edildiğinde mount edildiğinde mount edilmesi açılması render edildiğinde tamamen ilk yüklemez vesaire ne işe yarayacağını ifade etmek için kullanılan bir özellik use effect arkadaşlar şimdi biz bu use effectin nasıl kullanılacağını birlikte görelim başlığını atmıştık zaten şuraya öncelikle bunun için iki tane use state oluşturmak istiyorum burada öncelikle const'la başlamam lazım tabii
13:21 consti var bir yine sayaç virgül setanç tamam şuraya geldim eşittir useangıç değerim ne olsun arkadaşlar 0 peki bu sayacak sayma işlemini bu gerçekleştirecek peki bir şey daha var ben başlat ve durdur sıfırla gibi butonlar koyacağım arkadaşlar buna burada da bu butonların hani aktif olup olmama durumunu takip etmek için bir şöyle bir şeye ihtiyacım var aktif diyeyim yani true false bum değişkenine ihtiyacımız var aslında e eş use state açtım süslü parantezimi ve
14:10 diyorum ki trusunun sen de şurası set değil tabii ki set aktif güzel iki tane use state oluşturduk yani şimdi bunların altında işte bir use effectimiz olacak use effect peki açtık süslü parantezimizi ve use effect yani tetikleme işlemi gerçekleştiğinde ne olacak onu da buraya yazıyoruz işte use effect tetikleme işlemi yaşekleştir şimdi eğer eğer aktif değilse aktif değilse ne demek yani true şu an true değilse falsea yani tamam falsea return çalışsın return çalışsın ha şunu bir
14:56 parantez içerisine alayım şöyle tamam const interval diye bir yine setimiz var ve diyoruz ki set interval bu nedir arkadaşlar set interval bu hazır bir bileşen hazır bir fonksiyon burada arkadaşlar zaman ayarlamak için kullandığımız bir fonksiyon birazdan açıklayayım bunu setç sayaç + 1 tamam güzel yani sayacımızı 1 artır peki durumumuz şu ne
15:44 zaman ne zaman 1000 milsaniyede 1 artır 1000 milsaniyede 1 artır hım bu aslında 1 saniye demek bakın bir saniyede sayacımızı bir artır her bir saniyede sayacımızı bir artır yani sayaç otomatik olarak devam edecek use effect bunu gerçekleştirecek arka plan aldığında ne olacak ne bitecek bunlarla birlikte bakacağız arkadaşlar tamam şu ne demiştik active tes de return'e git o zaman şuraya bir de return yazıyoruz arkadaşlar return tamam geldik burada da yeni bir fonksiyon var clear enter var temizle neyi temizle ıntervality'i temizle yani şurada belirlediğim değişkeni temizle arkadaşlar ne zaman
16:31 peki ne zaman aktifken güzel burayı tamamladık şimdi gelelim bizim tasarımsal sürecimize yani aslında ne var tasarımsal sürecimizde bir ekranda görünecek yazımız var bir de arkadaşlar butonlarımız var şimdi burada butonlarımız var evet şimdi bir tane buton koyalım yukarıya butonumuz geldi mi onu da bir kontrol edelim biliyorsunuz şuraya buton gelmediğinde hata veriyor use effect use state gelmiş durumda import edilmiş durumda yani geldik butonumuza butonumuzun
17:20 title'ı titleı arkadaşlar title eşittir süslü parantezimizi açtık iki tane ayrı buton yapabiliriz durdur ya da işte başlat gibi ben bunun yerine tek buton ve bu buton üzerinde durumuna göre işte eee durdur yazmasını ya da işte durumuna göre arkadaşlar eee başlat yazmasını istiyorum burası ne iş yapıyor hemen açıklayayım bir tamamen bitireyim onpress ha tabii şeyi bitirmedik şuradaki kısmımızı
18:07 bitirelim press basıldığında basıldığında bunu da söylemiş olduk arkadaşlar aktif ise set aktif false false olarak ayarla şuraya geldim değilse set aktif ekranda görünmüyor galiba şurayı küçültelim set actif true bir butonumuz var peki şimdi gelelim bir de sıfırla butonu koyalım arkadaşlar buna sıfırla
18:52 butonu ne yapacak teker bir buton bunu şöyle kapatalım title bunu direkt 0ırla yazıyorum on arkadaşlar yani basıldığında basıldığında set sayanç ne olacak arkadaşlar 0 olacak yani başlangıç değerine geri dönecek üstteki butonumu açıklayacağım arkadaşlar henüz unutmadım onu şuraya da bir
19:37 text ekleyelim bu da neyi göstersin sayac değerini göstersin arkadaşlar güzel şöyle bir format doküman diyelim hı şimdi ne var butonumuz başlığını bir şey yazacak ya durdur ya başlat yazacak diyor ki aktifse yani true yani çalışıyorsa durdur yaz bu iki noktada diyor ki çalışmıyorsa yani falsea başlat yaz pasif durumdaysa başlat yaz çalışır durumdaysa durdur yaz yani sayaç ilerliyorsa durduruyorsun sayaç durmuş durumdaysa başlat yazsın ya da devam et de olabilir burası mesela ne oldu basıldığında ise arkadaşlar basıldığında
20:23 ise set aktifi değiştir yani şuradaki aktifi değiştir yukarıdaki oluşturduğumuz use'lerden birisiydi bakın şurası set aktifi değiştir set aktif neymiş arkadaşlar set aktif eğer aktifse yani trueysa false yap değilse true değilse false demektir falsea da true'ya çevir yani pasif aktif duruma getir diyor arkadaşlar bir iki de biçimsel özelliğe bakalım burada arkadaşlar eee şöyle tamamen ortaya almak istiyorum diyelim bütün her şeyi ne yapalım bununla ilgili şuna bir style verelim olduğu style eşittir süslü parantezimiz sty
21:11 nokta e konteyner ana kapsayıcımız neticede bu peki aşağı iniyorum biraz Türkçe biraz İngilizce şöyle konteynerımız arkadaşlar ne olsun iki nokta süslü parantez ya da direkt böyle bir görüntüleyelim sonra konteynerumuza bakalım bakın başladı neden direkt başladı hemen açıklayalım mı durdur dedim başlata döndü ve durdu sıfırla dedim sıfırladı başlat dedim tekrar artmaya başladı durdur dedim neden e uygulama başlar başlamaz eee çalışmaya sayaş devam etmeye başladı benim başlat butonumu
21:58 beklemedi arkadaşlar çünkü bakın başlangıç değeri true true olduğunda ne yap diyor çalışmaya başla diyor true değilse buraya git diyor zaten başlangıç değeri true olduğu için hemen şu süreç devreye giriyor tetikleniyor use effect tetekleniyor use effect direkt diyor ki ha ben buradan bakıyorum hemen burayı peki burada şöyle bir şey var unuttuğumuz bir durum var tabii arkadaşlar yani unuttuğumuz değil de aslında eklememiz gereken bir şey olabilir burada şimdi şu sonucuna şuraya sonuna biz ne zaman ne olacağına yönelik bir şey ekleyebiliyoruz arkadaşlar bundan da biraz bahsedeceğim butonumu bahsettikten sonra şimdi butonum tekrar ne diyordu butonumu tekrar açıklayayım bakın şuradan örnekten şimdi diyor ki buton
22:44 şuradaki buton eğer e aktifse yani true durdur yazsın şu an başlat yazıyor true değilse başlat yazsın bakın başlat yazıyor false olduğu için başlat yazıyor başlattım şimdi true true olduğu için sayı artmaya başladı devam ediyor ve burası durdura döndü peki bunu nasıl belirledik işte bunu da şuradan belirledik arkadaşlar şu an ne e aktifi neye ayarladı arkadaşlar aktifin değeri şu an arkadaşlar true'yu isa ne yaptı false'a çevirdi sonra bastığımda ise tam tersi bir durum ortaya çıkıyor şurada görüntüyü de biraz değiştirelim şuna da bir şu vereyim
23:30 direkt ve align items center olsun arkadaşlar butonlarımız da küçüldü bu sadece bunlar büyük kalsın bu küçük istiyorsak ne yapmamız lazım yani daha doğrusu onlar normal kalsın burası ortalanmasın gibi niyetimiz olursa hemen şöyle bir şey yapabiliriz şuraya geliriz bir view oluştururuz bunu alır bunun içine koyarız
24:16 ve büyüğümüzde deriz ki style pardon style eşittir iki tane süslü parantez koyayım buna ben eşittir değil bu arada şöyle iki tane süslü parantez koyayım ve align items 2 no center diyeyim şu konteyn da bunu yazmaktan vazgeçelim evet şöyle olsun gördüğünüz gibi şu an uygulamamız çalışır hale
25:04 geldi arkadaşlar son olarak bir de şundan bahsetmiştim arkadaşlar use effectinin şurada gördüğünüz gibi şurada virgül şu şekil yaptığınızda arkadaşlar bu şu anlama gelecek bu ilk defa mount edildiğinde anlamına gelecek arkadaşlar bakın başladı durdur başlat gördünüz mü devam etmiyor eee ne zaman devam ediyor bu bunu yaptığınızda burası ilk defa açıldığında çalışsın anlamına geliyor bakın gördünüz mü 1de kaldı bu unutulmasın ya da bunun içerisine bir özellik yazabiliriz işte aktif aktif ne demek bu değiştiğinde
25:51 aktif bileşenin değiştiğinde hareket et anlamına gelecek arkadaşlar yani saymaya başla anlamına gelecek say diyecek ya da 1 bakın devam etmiyor şimdi şuna her basımda bakın 2 yine bekleyecek neden şu an eee aktif durumunun değişmesini bekliyor peki aktif durumu kendi kendine değişiyor mu değişmiyor eee nasıl değişiyordu butona bastığımda şurada bakın falsa true true isa false true mu var butona bastığımda yani butona basmamı bekliyor bir sonraki sayıya geçmek için tekrar başlatıyorum true zaten şöyle bir durum var sadece butona bir defa basmam da yetmiyor true olduğunda sayıyı arttırıyor dolayısıyla şu an duruyor false olduğu için tekrar başlat
26:37 demem lazım true olması ve dur çalışması lazım yani nihayetinde şu var eğer bir köşeli parantez koyar ve köşeli parantezin içerisine de bir state yazarsanız o state'deki ya da işte bir özellik yazarsanız başka bir bileşen de olabilir fonksiyon da olabilir o fonksiyondaki değişim use effectin içerisini tetiklesin anlamına geliyor boş bırakırsanız ilk defa mount edildiğinde anlama geliyor arkadaşlar yani sayfayı ilk açtığınız çalışacak bekleyecek hım peki şu ne demek bu şekilde bıraktıysanız işte sayfa yüklendiğinde anlamına gelecek ve devam edecek arkadaşlar sürekli eee yaşam döngüsü aslında tamamen bunu anlatıyor durdurdum sıfırladım ve bu uygulamamız da bu örneğimizi de burada tamamlamış bulunuyoruz
27:24 arkadaşlar tekrar başarılar diliyorum hepinize kolay gelsin bir sonraki örneğimizde bir sonraki dersimizde görüşmek üzere ev
