هوک‌های ری اکت یا React Hooks

هوک‌ها به شما امکان استفاده از ویژگی‌های مختلف ری‌اکت را در کامپوننت‌های خود می‌دهند. شما می‌توانید از هوک‌های داخلی استفاده کنید یا آن‌ها را ترکیب کرده و هوک‌های خودتان را ایجاد کنید. این صفحه تمامی هوک‌های داخلی موجود در ری‌اکت را لیست می‌کند.

هوک `useState`

`useState` به یک کامپوننت امکان "یادآوری" اطلاعات مانند ورودی کاربر را می‌دهد. مثلاً، یک کامپوننت فرم می‌تواند از `state` برای ذخیره مقدار ورودی استفاده کند، در حالیکه یک کامپوننت گالری تصاویر می‌تواند از `state` برای ذخیره فهرست تصاویر انتخاب شده استفاده کند.

برای افزودن `state` به یک کامپوننت، از یکی از این هوک‌ها استفاده کنید:

- `useState`: یک متغیر `state` اعلام می‌کند که می‌توانید به طور مستقیم به روز کنید.
- `useReducer`: یک متغیر `state` با منطق به‌روزرسانی داخل یک تابع کاهش‌گر اعلام می‌کند.

```jsx
function ImageGallery() {
const [index, setIndex] = useState(0);
// ...
}
```

هوک `Context`

کانتکست `Context` به یک کامپوننت امکان دریافت اطلاعات از والدین دور بدون اینکه به عنوان props منتقل شود را می‌دهد. به عنوان مثال، کامپوننت اصلی برنامه شما می‌تواند تم رابط کاربری (UI) فعلی را به تمام کامپوننت‌های زیرمجموعه منتقل کند، بدون در نظر گرفتن اینکه چقدر عمیق هستند.

هوک `useContext` اطلاعات را می‌خواند و آن را با `Context` اشتراکذاری می‌کند.

```jsx
function Button() {
const theme = useContext(ThemeContext);
// ...
}
```

هوک `Ref` (رف)

هوک‌های رف یا Refs به یک کامپوننت اجازه می‌دهد اطلاعاتی را که برای رندر استفاده نمی‌شوند، مانند یک گره DOM یا شناسه زمان‌بندی، نگهداری کند. این مفید است زمانی که نیاز به کار با سیستم‌های غیر ری‌اکت مانند API های بومی یا داخلی مرورگر دارید.

```jsx
const inputRef = useRef(null);
// ...
```

هوک `Effect`

هوک‌های افکت‌ به یک کامپوننت اجازه می‌دهند به سیستم‌های خارجی متصل شده و با آن‌ها همگام شود. این شامل مواجهه با شبکه، DOM مرورگر، انیمیشن‌ها، ویجت‌هایی که با استفاده از یک کتابخانه UI متفاوت نوشته شده‌اند، و سایر کدهای غیر ری‌اکت است.

```jsx
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
// ...
```

هوک‌های دیگر

-هوک `useMemo`: امکان ذخیره نتایج یک محاسبه گران قیمت را می‌دهد.
-هوک `useCallback`: امکان ذخیره تعریف یک تابع را قبل از انتقال آن به یک کامپوننت بهینه‌سازی شده در حافظه پنهان می‌کند.

```jsx
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
// ...
```

هوک‌های دیگر و هوک‌های سفارشی

با هوک‌های دیگر مثل `useDebugValue`، `useId`، `useSyncExternalStore` و هوک‌های سفارشی می‌توانید ویژگی‌های مختلف و مفیدی به کامپوننت‌های خود اضافه کنید.هوک‌ها به شما امکان استفاده از ویژگی‌های مختلف ری‌اکت را در کامپوننت‌های خود می‌دهند. شما می‌توانید یا از هوک‌های داخلی استفاده کنید یا آن‌ها را ترکیب کرده و هوک‌های خودتان را ایجاد کنید. این صفحه تمامی هوک‌های داخلی موجود در ری‌اکت را لیست می‌کند.

هوک‌ `state`
`state` به یک کامپوننت امکان "یادآوری" اطلاعات مانند ورودی کاربر را می‌دهد. به عنوان مثال، یک کامپوننت فرم می‌تواند از `state` برای ذخیره مقدار ورودی استفاده کند، در حالیکه یک کامپوننت گالری تصاویر می‌تواند از `state` برای ذخیره فهرست تصاویر انتخاب شده استفاده کند.

برای افزودن `state` به یک کامپوننت، از یکی از این هوک‌ها استفاده کنید:

- `useState`: یک متغیر `state` اعلام می‌کند که می‌توانید به طور مستقیم به روز کنید.
- `useReducer`: یک متغیر `state` با منطق به‌روزرسانی داخل یک تابع کاهش‌گر اعلام می‌کند.

function ImageGallery() {
const [index, setIndex] = useState(0);
// ...

هوک‌ `Context`
`Context به یک کامپوننت امکان دریافت اطلاعات از والدین دور بدون اینکه به عنوان props منتقل شود را می‌دهد. به عنوان مثال، کامپوننت اصلی برنامه شما می‌تواند تم رابط کاربری (UI) فعلی را به تمام کامپوننت‌های زیرمجموعه منتقل کند، بدون در نظر گرفتن اینکه چقدر عمیق هستند.

`useContext` اطلاعات را می‌خواند و آن را با `Context` اشتراکذاری میکند .
function Button() {
const theme = useContext(ThemeContext);
// ...

Ref Hook هوک رف
Refs به یک کامپوننت اجازه می‌دهد اطلاعاتی را که برای رندر استفاده نمی‌شوند، مانند یک گره DOM یا شناسه زمان‌بندی، نگهداری کند. برخلاف state، به‌روزرسانی یک رف ref، کامپوننت شما را دوباره رندر نمی‌کند. Ref ها یک "دریچه فرار escape hatch" از پارادایم React است. آنها زمانی مفید هستند که نیاز به کار با سیستم های غیر ری‌اکت مانند API های بومی یا داخلی مرورگر دارید.

useRef یک رف را تعریف یا اعلان می کند. شما می توانید هر مقداری را در آن نگه دارید، اما اغلب از آن برای نگه داشتن یک گره DOM استفاده می شود.
useImperativeHandle به شما این امکان را می دهد که ref نمایش داده شده توسط کامپوننت خودتان را سفارشی کنید. این به ندرت استفاده می شود.
function Form() {
const inputRef = useRef(null);
// ...

هوک افکت effect
افکت‌ها به یک کامپوننت اجازه می‌دهند به سیستم‌های خارجی متصل شده و با آن‌ها همگام شود. این شامل مواجهه با شبکه، DOM مرورگر، انیمیشن‌ها، ویجت‌هایی که با استفاده از یک کتابخانه UI متفاوت نوشته شده‌اند، و سایر کدهای غیر ری‌اکت.

useEffect یک کامپوننت را به یک سیستم خارجی متصل می کند.
function ChatRoom({ roomId }) {
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
// ...

افکت ها یک «دریچه فرار» از پارادایم ری‌اکت هستند. از افکت ها برای هماهنگ کردن جریان داده برنامه خود استفاده نکنید. اگر با یک سیستم خارجی تعامل ندارید، ممکن است به افکت نیاز نداشته باشید.

دو نوع متفاوت useEffect با تفاوت در زمان بندی به ندرت استفاده می شود:

useLayoutEffect قبل از اینکه مرورگر صفحه را دوباره بازآرایی کند فعال می شود. شما می توانید طرح بندی یا layout را در اینجا اندازه گیری کنید.
useInsertionEffect قبل از اینکه ری‌اکت تغییراتی در DOM ایجاد کند فعال می شود. کتابخانه ها می توانند CSS پویا را در اینجا قرار دهند

هوک عملکرد Performance Hooks
یک راه متداول برای بهینه سازی عملکرد رندر مجدد این است که از کارهای غیر ضروری خودداری کنید. به عنوان مثال، می‌توانید به ری‌اکت بگویید که از یک محاسبات کش‌شده استفاده مجدد کند یا اگر داده‌ها نسبت به رندر قبلی تغییر نکرده‌اند، از رندر مجدد صرفنظر کند.

برای رد شدن از محاسبات و رندر مجدد غیر ضروری، از یکی از این هوک ها استفاده کنید:

useMemo به شما امکان می دهد نتیجه یک محاسبه گران قیمت را ذخیره کنید.
useCallback به شما امکان می دهد تعریف یک تابع را قبل از انتقال آن به یک کامپوننت بهینه شده در حافظه پنهان ذخیره کنید. به بیان دیگر به شما این امکان را می‌دهد که یک تعریف تابع را قبل از ارسال آن به یک کامپوننت بهینه‌سازی شده، کش نمایید.
function TodoList({ todos, tab, theme }) {
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
// ...
}

گاهی اوقات، نمی‌توانید از رندر مجدد صرفنظر کنید، زیرا صفحه در واقع باید به‌روزرسانی شود. در آن صورت، می‌توانید با جدا کردن به‌روزرسانی‌های مسدودکننده که باید همزمان باشند (مانند تایپ کردن در ورودی) از به‌روزرسانی‌های غیرمسدودکننده که نیازی به مسدود کردن رابط کاربری ندارند (مانند به‌روزرسانی نمودار) عملکرد را بهبود بخشید.

برای اولویت بندی رندر، از یکی از این هوک ها استفاده کنید:

useTransition به شما امکان می‌دهد یک انتقال حالت را به‌عنوان غیرمسدود علامت‌گذاری کنید و به سایر به‌روزرسانی‌ها اجازه دهید آن را قطع یا مختل کنند.
useDeferredValue به شما امکان می‌دهد به‌روزرسانی یک بخش غیر مهم از UI را به تعویق بیندازید و اجازه دهید قسمت‌های دیگر ابتدا به‌روزرسانی شوند.

هوک منابع Resource Hooks

منابع را می توان توسط یک کامپوننت بدون داشتن آنها به عنوان بخشی از state خود، در دسترس قرار داد. برای مثال، یک کامپوننت می‌تواند پیامی را از یک پرامیس بخواند یا اطلاعات استایل دهی را از یک context بخواند.

برای خواندن یک مقدار از یک منبع، از این هوک استفاده کنید:

use به شما امکان می دهد ارزش منبعی مانند Promise یا context را بخوانید .

function MessageComponent({ messagePromise }) {
const message = use(messagePromise);
const theme = use(ThemeContext);
// ...
}

هوک های دیگر

این هوک ها بیشتر برای نویسندگان کتابخانه مفید هستند و معمولاً در کد برنامه استفاده نمی شوند.

useDebugValue به شما امکان می دهد برچسب نمایش React DevTools را برای هوک سفارشی خود سفارشی کنید.
useId به یک کامپوننت اجازه می دهد تا یک شناسه منحصر به فرد را با خودش مرتبط کند. معمولاً با API های دسترسی استفاده می شود.
useSyncExternalStore به یک کامپوننت اجازه می دهد در یک فروشگاه خارجی مشترک شود.

هوک های سفارشی

هوک سفارشی به شما امکان می‌دهند لاجیک یا منطق state را به اشتراک بگذارید ، اما خود state را به اشتراک نگذارید. هر فراخوانی به یک هوک کاملاً مستقل از هر قراخوانی دیگری به همان هوک است.

برای مطالعه بیشتر درباره هوک سفارشی به اینجا مراجعه کنید:

https://react.dev/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component