React Hooks Detaylı Kullanım Rehberi

React Hooks, functional component'lerde state ve lifecycle yönetimini mümkün kılan güçlü bir özellik. useState, useEffect, useContext gibi temel hook'ların yanı sıra custom hook'lar da oluşturabilirsiniz.

Bu rehberde tüm hook türlerini örneklerle açıklayacağız.

useState Hook

import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>\n        Increment\n      </button>\n    </div>\n  );\n}

useEffect Hook

import React, { useState, useEffect } from 'react';\n\nfunction DataFetcher() {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    fetch('/api/data')\n      .then(response => response.json())\n      .then(data => setData(data));\n  }, []); // Empty dependency array\n\n  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;\n}

Custom Hooks

Kendi hook'larınızı oluşturarak kod tekrarını azaltabilir ve logic'i paylaşabilirsiniz:

function useCounter(initialValue = 0) {\n  const [count, setCount] = useState(initialValue);\n\n  const increment = () => setCount(count + 1);\n  const decrement = () => setCount(count - 1);\n  const reset = () => setCount(initialValue);\n\n  return { count, increment, decrement, reset };\n}