⚡ Render Logic vs Event Handler

• Render Logic: Component’in JSX/HTML ve UI yapısını oluşturan kısımdır.
• Event Handler: Kullanıcı etkileşimlerine yanıt veren fonksiyonlardır (örn. onClick, onMouseEnter).

function Button() {
  const [count, setCount] = useState(0);

  // Event handler
  const handleClick = () => {
    setCount(prev => prev + 1);
  };

  return <button onClick={handleClick}>Click {count}</button>;
}

⚡ Pure ve Impure Fonksiyonlar

• Pure: Aynı input ile her zaman aynı output’u verir, yan etkisi yoktur.
• Impure: Yan etkisi vardır veya aynı input farklı output üretebilir.
• Side Effect: Fonksiyonun kendi dışındaki bir şeyi değiştirmesi (DOM, state, API çağrısı vb.).
  • Her zaman kötü değildir ama mümkün olduğunca azaltmak iyi bir pratiktir.

⚡ Side Effect Yönetimi

• Side effect’leri component logic’inden ziyade event handler veya useEffect içinde çalıştırmak en doğru yöntemdir.
• Component yüklendikten sonra bir işlem yapmak istiyorsak:

useEffect(() => {
  console.log("Component yüklendi");
}, []);

⚡ State Güncellemeleri ve Callback

• Event handler içinde birden fazla state güncellemesi varsa React bunları tek render ile birleştirir.
• Hemen console.log ile kontrol ederseniz yeni state görünmez.
• Callback kullanarak anlık değeri alabilirsiniz:

setCount(prev => prev + 1);
console.log("State hemen güncellenmez");