React Hook’ları, React 16.8’de tanıtılan ve fonksiyon bileşenlerinde durum (state) ve yan etkileri (side effects) yönetmeyi kolaylaştıran fonksiyonlardır. Hook’lar, sınıf bileşenlerinde yapabileceğimiz birçok işlemi fonksiyon bileşenlerinde yapmamızı sağlar. Bu yazıda, en yaygın kullanılan React Hook’larını ve kullanım alanlarını basit örneklerle inceleyeceğiz.
useState
useState, bileşen içinde durum değişkenleri tanımlamak ve yönetmek için kullanılır. İşte bir sayaç örneği:
app/page.tsx
import React, {useState} from 'react'
const BentoGrid = () => {
const [count, setCount] = useState(0)
const increment = () => {
setCount(prev => prev + 1)
}
const reset = () => {
setCount(0)
}
return (
<div>
<p>{count}</p>
<button onClick={increment}>Increment</button>
<button onClick={reset}>Increment</button>
</div>
)
}
export default BentoGridBu örnekte, useState(0) başlangıç değerini 0 olarak belirlediğimiz bir durum değişkeni oluşturur. increment ve reset fonksiyonları, durum değişkenini artırmak ve sıfırlamak için kullanılır.
Next.js Tailwindcss Örnek Uygulama
Name:
components/hooks-useState.tsx
"use client"
import React, { useState } from "react"
const HooksUseState = () => {
const [name, setName] = useState("")
const reset = () => {
setName("")
}
return (
<div className="space-y-2 rounded-lg p-5 bg-white/10">
<p className="text-2xl font-bold">Name: {name}</p>
<div className="flex flex-col md:flex-row gap-5">
<input
value={name}
placeholder="Enter your name"
onChange={(e) => setName(e.target.value)}
className="rounded-md px-5 py-3 bg-blue-400/30 font-semibold text-lg "
/>
<button
disabled={name === ""}
className="disabled:cursor-not-allowed disabled:opacity-50 rounded-md px-8 py-3 bg-green-400/30 font-semibold text-lg hover:opacity-50 transition-all duration-200"
onClick={reset}
>
Reset
</button>
</div>
</div>
)
}
export default HooksUseState
New Hook Loading...