useState ve useEffect React’ın hook methodlarındandır. Hook dediğimiz olay React ta kendi tabiriyle yaşam döngüsününde kullanılan methodlara erişimi sağlayan bir özelliktir.
useState: Bu method verilerimizi tutamyı sağlar. Bir nevi değişken tanımlayıp veri tutmak gibi. Tanımlanan ilk parametrede tutmak istediğiniz bir verinin başlangıç değerini alır ikinci parametrede yeni değeri atanır. Bu işlem aynı değeri döndüren bir method tanımlayarak ta yapılabilir.
Tanımlamasına bakalım
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import {useState} from “react”; function UseState(){ const [number,setNumber] = useState(10); const [text,settext] = useState(“Lorem Input”); return( <div> <div> <h2>{number}</h2> <button onClick={() => setNumber(number+1)} >Arttır</button> </div> <br /><br /> <div> <h2>{text}</h2> <button onClick={() => settext(“Use State”)} >Yazı Değiş</button> </div> </div> ); } export default UseState; |
Şimdide Method tanımlayarak yapallım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import {useState} from “react”; function UseState(){ const [number,setNumber] = useState(10); const [text,setText] = useState(“Lorem Input”); const handleChange () => { setText(“Yazı Değişti”) } return( <div> <div> <h2>{number}</h2> <button onClick={() => setNumber(number+1)} >Arttır</button> </div> <br /><br /> <div> <h2>{text}</h2> <button onClick={handleChange}> Yazı Değişti</button> </div> </div> ); } export default UseState; |
useEffect : Değişkenlerin değiştiği anları yakalayan methodları useeffect ile yaparız. Yani use effect üzerinden state değişikliklerini anlarız.
Yukardaki ilk örnekte Arttır butonuna tılandığında o değişim anını yakalamak istiyorum.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import {useState,useEffect} from “react”; function UseEffect(){ const [number,setNumber] = useState(10); const [text,settext] = useState(“Lorem Input”); useEffect(() => { console.log(“Use Effect çalıştı….”) },[number]) return( <div> <h1> Using Use Effect</h1> <hr /> <div> <h2>{number}</h2> <button onClick={() => setNumber(number+1)} >Arttır</button> </div> <br /><br /> <div> <h2>{text}</h2> <button onClick={() => settext(“Use Effect”)} >Yazı Değiş</button> </div> </div> ); } export default UseEffect; |
NOT: Sadece Number değiştiğinde useEffectin çalışmasını istiyorsak {} den sonra” },[number] ” onu belirtmemiz gerekiyor
sağlıcakla kalın…
Bir yanıt yazın