REACT USETATE VE USEEFFECT KULLANIMI
Merhaba.
Arkadaşlar useState kullanırken anlamadığım şekilde çalışmıyor.
useEffect ile component oluşturdum. Oluşturduğum componente click eventi ekledim ve bu event ile state'imi set etmeye çalışıyorum fakat state değerim değişmiyor. Yardımcı olur musunuz nerede hata yapıyorum.
useEffect(() => {
const divAnnouncement = document.querySelector('#divAnnouncement')
const announcements = posts.map((post) => {
const newHeader = document.createElement('h1')
newHeader.innerHTML = post.post
const newDiv = document.createElement('div');
newDiv.style.backgroundColor = '#FFEDDA'
newDiv.style.width = '300px'
newDiv.style.height = '100px'
newDiv.style.marginTop = '10px'
newDiv.style.borderRadius = '15px'
newDiv.style.textAlign = 'left'
newDiv.addEventListener('click',()=>{
setGetAnnouncement(!getAnnouncement)
console.log(getAnnouncement);
})
newDiv.appendChild(newHeader)
divAnnouncement.appendChild(newDiv)
})
}, [])
-useEffect'in 2. parametresi bağımlılıklardır. Yani neye göre çalışacağını belirtirsin. [] boş göndermek demek component'ın sayfa içerisinde gösterildiği an 1 kere çalışacaktır.
Eğer bir state verirsen o state'ın değeri değiştiğinde tekrar çalışacaktır. (Bağımlılıkları iyi belirtmen gerekir yoksa performans sıkıntıların çıkar)
-useEffect'ın kullanım amacı bir dom elementi oluşturmak değildir. Life-cycle aşamalarını yönetmektir. Araştırsan daha iyi olur
-Bu aşamaları direkt Tayfun abinin dediği gibi Component olarak yazman gerekir.
-React içerisinde document'ı çok kullanmamaya çalış zaten amacımız domu sürekli yeniden build etmesini engellemek.
-Bir component'ın dom'daki referansına useRef ile erişebilirsin. document.querySelector vs gerek yok