React Hooks: useState ve useEffect Tam Rehber

React Hooks, fonksiyonel bilesenlerle state ve lifecycle yonetimini mumkun kilar.

useState

// (c) CodeMareFi - codemarefi.com.tr
import { useState } from 'react';
function Sayac() {
  const [sayi, setSayi] = useState(0);
  return (
    <div>
      <p>Sayi: {sayi}</p>
      <button onClick={() => setSayi(sayi + 1)}>Artir</button>
      <button onClick={() => setSayi(0)}>Sifirla</button>
    </div>
  );
}

useEffect

// (c) CodeMareFi - codemarefi.com.tr
import { useState, useEffect } from 'react';
function Kullanici({ id }) {
  const [kullanici, setKullanici] = useState(null);
  useEffect(() => {
    fetch('/api/users/' + id)
      .then(r => r.json())
      .then(data => setKullanici(data));
    return () => { /* temizlik */ };
  }, [id]); // id degisince tekrar calis
  if (!kullanici) return <p>Yukleniyor...</p>;
  return <p>{kullanici.isim}</p>;
}