هوک useState در React چیست؟

useState یکی از هوک‌های اصلی در ری‌اکت هست که بهت این امکان رو می‌ده تا وضعیت (state) رو توی کامپوننت‌های تابعی مدیریت کنی. قبل از معرفی هوک‌ها، فقط کامپوننت‌های کلاسی می‌تونستن وضعیت داشته باشن، ولی حالا با هوک‌ها، کامپوننت‌های تابعی هم می‌تونن وضعیت رو نگه دارن و به‌روز کنن.

وقتی useState رو صدا می‌زنی، یه جفت مقدار بهت برمی‌گرده:
۱. مقدار فعلی وضعیت
۲. تابعی که می‌تونی ازش برای به‌روزرسانی اون مقدار استفاده کنی

مثلاً فرض کن می‌خوای یه شمارنده ساده بسازی که هر بار دکمه‌ای رو کلیک می‌کنی، عددش زیاد بشه. برای این کار از useState استفاده می‌کنی تا مقدار شمارنده رو ذخیره کنی و هر وقت نیاز بود، اونو تغییر بدی.

import React, { useState } from 'react';
function Counter() {
// Declare a state variable named 'count' initialized with 0
const [count, setCount] = useState(0);
// Function to handle button click
const incrementCount = () => {
setCount(count + 1); // Update the state variable 'count'
};
return (
<div>
<p>You clicked {count} times</p>
<button onClick={incrementCount}>
Click me
</button>
</div>
);
}
export default Counter;

توضیح:

• در خط اول، useState رو از ری‌اکت ایمپورت می‌کنیم.
• const [count, setCount] = useState(0); یک حالت (state) به اسم count با مقدار اولیه ۰ تعریف می‌کنه. تابع setCount هم برای به‌روزرسانی مقدار count استفاده می‌شه.
• هر بار که روی دکمه کلیک می‌کنی، تابع incrementCount فراخوانی می‌شه و مقدار count رو یک واحد افزایش می‌ده.
• این مثال باعث می‌شه هر بار که دکمه کلیک می‌شه، مقدار شمارنده به‌روزرسانی بشه و در متن نشون داده بشه.

این طوری به راحتی می‌تونی وضعیت رو توی کامپوننت‌های تابعی مدیریت کنی.