React Hooks ile Modern Komponent Geliştirme

Yazılım 📖 1 dk okuma
#react#javascript#frontend#hooks

React Hooks, fonksiyonel komponentlerde state ve lifecycle özelliklerini kullanmamızı sağlayan güçlü araçlardır.

useState Hook

En temel hook olan useState ile state yönetimi:

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

useEffect Hook

Yan etkileri yönetmek için useEffect:

useEffect(() => {
  document.title = `${count} kez tıklandı`;
}, [count]);

Custom Hooks

Kendi hook’larınızı oluşturabilirsiniz:

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    return localStorage.getItem(key) || initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, value);
  }, [key, value]);
  
  return [value, setValue];
}

React Hooks sayesinde kod daha okunabilir ve yeniden kullanılabilir hale geliyor!