اگر بخواهیم یکی از دلایل اصلی محبوبیت ریاکت را نام ببریم، بدون شک سادگی در مدیریت حالت (State) یکی از مهمترین آنهاست. وقتی صحبت از مدیریت State میشود، اولین چیزی که به ذهن هر توسعهدهنده ریاکت میرسد، useState است. این هوک کوچک اما قدرتمند، امکان ذخیره و بهروزرسانی دادهها را به سادهترین شکل ممکن فراهم میکند.
برای درک اهمیت این ابزار، کافی است بدانید که بدون useState در ری اکت، ساختن حتی یک شمارنده ساده یا فرم ثبتنام به یک چالش بزرگ تبدیل میشد. طبق آمار State of JS، بیش از 70٪ توسعهدهندگان ریاکت در پروژههای روزمره خود از useState استفاده میکنند؛ این یعنی اگر ریاکت یک شهر باشد، useState همان خیابان اصلی آن است که همه از آن عبور میکنند.
در این مقاله از بلاگ آموزشگاه مهندسی کندو قرار است با هم بفهمیم useState در ری اکت چیست، چطور کار میکند، چه کاربردهایی دارد.
useState چیست و چرا اهمیت دارد؟ (به زبان ساده)
useState در ری اکت یک ابزار یا بهتر بگوییم یک هوک است که برای مدیریت دادههای متغیر در کامپوننتها استفاده میشود. اگر بخواهیم خیلی ساده بگوییم:
وقتی یک مقدار (مثل عدد، متن، یا حتی یک لیست) در کامپوننت شما تغییر میکند و میخواهید با این تغییر، UI (رابط کاربری) هم بهروزرسانی شود، از useState استفاده میکنیم.
در جاوااسکریپت معمولی، اگر متغیری را تغییر دهید، صفحه خودش آپدیت نمیشود. اما در ریاکت این کار را به کمک useState انجام میدهیم. این یعنی هر وقت مقدار state عوض شد، کامپوننت دوباره رندر میشود و تغییر را روی صفحه میبینیم.
مثال خیلی ساده:
فرض کنید یک دکمه دارید که با هر کلیک، عددی را یکی زیاد میکند. اگر از متغیر ساده استفاده کنید، تغییر را روی صفحه نمیبینید، اما با useState در ری اکت این مشکل حل میشود:
در این مثال:
- count همان مقدار فعلی است.
- setCount تابعی است که برای تغییر مقدار استفاده میکنیم.
- هر بار که setCount را صدا میزنیم، ریاکت دوباره کامپوننت را رندر میکند.
چرا اهمیت دارد؟
- چون بدون useState در ری اکت نمیتوانید حالتهای پویا داشته باشید.
- این اولین قدم برای ساختن اپلیکیشنهای تعاملی است.
- از فرمهای ساده تا برنامههای پیچیده، همه به State نیاز دارند.
طبق گزارش npm trends، بیش از 16 میلیون دانلود هفتگی برای ریاکت ثبت میشود، و تمام این پروژهها برای مدیریت حالت، از useState یا ابزارهای مشابه استفاده میکنند.
نحوه استفاده از useState در ری اکت
برای استفاده از useState در ری اکت ابتدا باید بدانید که این ابزار یک هوک در ری اکت است؛ یعنی تابعی که به شما اجازه میدهد قابلیتهای خاص ریاکت را داخل کامپوننتهای تابعی استفاده کنید. برای کار با useState، سه مرحله ساده دارید:
ایمپورت کردن useState از ریاکت
در ابتدای فایل کامپوننت باید useState را از کتابخانه ریاکت وارد کنید:
تعریف state با useState
برای تعریف یک state، از دستور زیر استفاده میکنیم:
- state → نام متغیری که داده شما را نگه میدارد.
- setState → تابعی که برای تغییر مقدار state استفاده میشود.
- initialValue → مقدار اولیه state (مثلاً عدد، متن یا حتی آرایه).
مثال ساده: ساخت یک شمارنده (Counter)
فرض کنید میخواهیم یک دکمه داشته باشیم که هر بار روی آن کلیک شد، عدد نمایش داده شده یکی افزایش پیدا کند. با useState در ری اکت این کار فوقالعاده ساده است:
چطور کار میکند؟
- در ابتدای کامپوننت، یک state به نام count تعریف کردهایم که مقدار اولیهاش ۰ است.
- برای تغییر این مقدار، از تابع setCount استفاده میکنیم.
- هر بار که دکمه را کلیک کنید، count + 1 به setCount داده میشود و ریاکت دوباره کامپوننت را رندر میکند تا مقدار جدید نمایش داده شود.
چرا این روش مهم است؟
در ریاکت اگر از متغیرهای معمولی جاوااسکریپت استفاده کنید، تغییر آنها باعث بهروزرسانی رابط کاربری نمیشود. اما وقتی از useState در ری اکت استفاده میکنید، ریاکت متوجه تغییر میشود و UI را دوباره رندر میکند.
نکته جالب: قبل از معرفی هوکها در نسخه 16.8 ریاکت، چنین کاری فقط با کامپوننتهای کلاسمحور ممکن بود. اما حالا با چند خط کد، در کامپوننتهای تابعی هم میتوانیم state داشته باشیم.
کاربردهای پیشرفته useState در ری اکت
برای استفاده حرفهای از useState در ری اکت، چند کاربرد مهم وجود دارد که دانستن آنها کمک میکند پروژههای پیچیدهتری را بهتر مدیریت کنید. در ادامه این کاربردها را بهصورت ساده توضیح میدهم:
- مدیریت آبجکتها: گاهی لازم است دادههایی را ذخیره کنید که فقط یک مقدار ساده مثل عدد یا متن نیستند، بلکه شامل چندین ویژگی هستند (مثل اطلاعات کاربر: نام، سن، شهر). در این حالت، باید یاد بگیرید چطور تغییرات را بدون خراب کردن بقیه بخشها انجام دهید.
- مدیریت آرایهها: در بسیاری از پروژهها مثل لیست کارها یا محصولات، دادهها به صورت آرایه ذخیره میشوند. استفاده از useState در ری اکت برای افزودن، حذف یا تغییر آیتمهای آرایه یک الگوی پرکاربرد است.
- بهروزرسانی بر اساس مقدار قبلی: گاهی لازم دارید مقدار جدید بر اساس مقدار قبلی حساب شود (مثل افزایش شمارنده). در این حالت باید از روشهایی استفاده کنید که مقدار قبلی از بین نرود و درست آپدیت شود.
- مقداردهی اولیه فقط یکبار (Lazy Initialization): اگر مقدار اولیه state محاسبه سنگینی دارد یا از localStorage میخوانید، بهتر است کاری کنید این عملیات فقط بار اول انجام شود، نه در هر بار رندر.
- انتخاب بین چند state کوچک یا یک state بزرگ: گاهی چند مقدار دارید که میتوانید برای هرکدام یک state جدا بگذارید یا همه را در یک آبجکت نگه دارید. هر روش مزایا و معایب خود را دارد و انتخاب درست اهمیت زیادی دارد.
- ریست کردن state هنگام تغییر props یا مسیر: در بعضی مواقع، وقتی ورودیهای کامپوننت عوض میشوند، باید state را به حالت اولیه برگردانید. برای این کار ترفندهایی وجود دارد تا نیاز نباشد کامپوننت را از صفر بنویسید.
- کنترل فرمها: فرمهای ورودی داده یکی از پرکاربردترین جاهایی است که از useState در ری اکت استفاده میشود. میتوانید برای هر فیلد یک state داشته باشید یا همه را در یک state آبجکتی ذخیره کنید.
- ذخیرهسازی اطلاعات کاربر در مرورگر: گاهی نیاز دارید اطلاعات حتی بعد از بستن مرورگر هم بماند. ترکیب useState با ابزارهایی مثل localStorage این امکان را فراهم میکند.
- جلوگیری از ذخیرهسازی دادههای غیرضروری: اگر میتوانید یک مقدار را از مقادیر دیگر محاسبه کنید، نیازی به ذخیره آن در state نیست. این کار باعث کاهش پیچیدگی میشود.
- جلوگیری از اشتباهات رایج: مثل تغییر مستقیم state یا استفاده اشتباه از مقدار قدیمی state. این اشتباهات باعث باگهای جدی میشوند.
سخن آخر
useState در ری اکت یکی از مهمترین ابزارها برای ساخت رابطهای کاربری تعاملی است. بدون آن، مدیریت دادههای پویا در کامپوننتها تقریباً غیرممکن میشود. از یک شمارنده ساده گرفته تا فرمهای پیچیده و حتی ذخیرهسازی اطلاعات کاربر، همه اینها با این هوک قدرتمند امکانپذیر است.
در این مقاله یاد گرفتیم:
- useState چیست و چرا اهمیت دارد
- چطور از آن استفاده کنیم
- کاربردهای پیشرفته برای استفاده بهتر
بیش از 70٪ توسعهدهندگان ریاکت در پروژههای خود از useState استفاده میکنند، چون این ابزار سادگی و انعطافپذیری بالایی دارد. اگر میخواهید در ریاکت حرفهای شوید، حتماً باید کار با useState را در دوره آموزش ری اکت کامل یاد بگیرید و در پروژههای واقعی تمرین کنید.
و در آخر، اگر به دنبال یادگیری عمیقتر هستید، پیشنهاد میکنیم از دوره جامع جاوا اسکریپت برای پیشنیازها و سپس از دوره جامع ری اکت برای تسلط کامل بر هوکها و ساخت پروژههای واقعی استفاده کنید.
