احتمالاً نام ویژگی جدید React یعنی hook را شنیده‌اید. با این ویژگی می‌توان از state و
امکانات دیگر React در مؤلفه‌های مبتنی بر تابع استفاده کرد.
جمله‌ای از مستندات React:
> In the longer term, we expect Hooks to be the primary way people write React components.
در این سؤال از شما می‌خواهیم دو قلاب سفارشی! (custom hook) ساده را پیاده‌سازی کنید.
# پروژه اولیه
پروژه اولیه را از
[اینجا](https://quera.ir/qbox/download/hqfITbk0HL/simple-hooks.zip)
دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
simple-hooks
├── public
│ ├── favicon.png
│ └── index.html
├── src
│ ├── components.js
│ ├── hooks.js
│ ├── index.css
│ └── index.js
├── README.md
├── package.json
└── pnpm-lock.yaml
```
# راه‌اندازی پروژه
**برای اجرای پروژه، باید `NodeJS` و `npm` (یا `pnpm`) را از قبل نصب کرده باشید.**
- در پوشه‌ی `simple-hooks` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- **نکته:** برای نصب سریع‌تر از `pnpm install` استفاده کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- با مراجعه به `http://localhost:3000/` می‌توانید نتیجه را ببینید.
- توجه کنید که در این سؤال اجرای پروژه‌ی اولیه با خطا مواجه می‌شود
و پس از پیاده‌سازی قسمت‌های مربوطه می‌توانید نتیجه‌ی نهایی را مشاهده کنید.
# جزئیات
موارد زیر را در فایل `hooks.js` پیاده‌سازی کنید.
## ۱. شمارنده‌ی حلقوی
useCounter(start, finish) => [c, count]
این قلاب مقدار شروع و پایان شمارنده را به عنوان ورودی می‌گیرد و یک آرایه شامل مقدار شمارنده و تابعی برای شمردن برمی‌گرداند. تابع `count` باید مقدار شمارنده را یک واحد اضافه کند. در صورتی که مقدار شمارنده برابر با `finish` باشد با شمارش بعدی مقدار به `start` تغییر می‌کند.
مثالی از نحوه‌ی استفاده که در پروژه‌ی اولیه نیز آمده است:
```js
function CounterDemo() {
const [c, count] = useCounter(100, 105);
return <div>
<p>{c}</p>
<button onClick={count}>Count</button>
</div>;
}
```
## ۲. پشته
useStack() => {stack, push, pop}
این قلاب یک پشته را پیاده‌سازی می‌کند و در خروجی یک شیء شامل مقادیر پشته (آرایه‌ی `stack`)، تابع `push` برای افزودن عنصر به پشته و تابع `pop` برای حذف آخرین عنصر را برمی‌گرداند.
مثالی از نحوه‌ی استفاده که در پروژه‌ی اولیه نیز آمده است:
```js
const words = ['Apple', 'Banana', 'Cherry', 'Grape'];
export function StackDemo() {
const {stack, push, pop} = useStack();
return <div>
{words.map((word, index) => <button key={index} onClick={() => push(word)}>{word}</button>)}
<button onClick={pop}>» Pop</button>
<ul>
{stack.map((item, index) => <li key={index}>{item}</li>)}
</ul>
</div>;
}
```
نحوه‌ی عملکرد مثال‌های بالا را در شکل زیر می‌بینید.
# نکات
- هر کدام از این دو hook را که پیاده‌سازی کنید، نمره‌ی آن را خواهید گرفت.
- پس از پیاده‌سازی، فایل `hooks.js` را ارسال کنید.