هوک useState امکان ایجاد state در functional component ها را میدهد.
استیت یک نوع variable در ریکت است که با آپدیت آن کامپوننت ریرندر میشود. قبل از عرضه react 16.8 فقط در class components امکان استفاده از state وجود داشت ولی با عرضه نسخه 16.8 و معرفی هوک ها امکان استفاده از استیت درون functional components هم اضافه شد. هوک useState که وظیفه ایجاد state را برعهده دارد، یک مقدار ورودی بعنوان مقدار اولیه استیت میگیرد و یک آرایه با دومقدار برمیگرداند:
const [state,setState] = useState(initialState?);
مقدار اولیه یا initialState : هوک useState مقدار اولیه state را بعنوان ورودی دریافت می‌کند.
هوک useState یک آرایه با دو مقدار ایجاد می‌کند.
مقدار state: اولین مقدار برگشت داده شده، مقدار فعلی استیت می‌باشد، در اولین رندر برابر با initialState می‌باشد.
تابع setState: دومین مقدار تابعی است که به کمک آن میتوان مقدار استیت را آپدیت کرد.
درون کامپوننت App استیت counter را ایجاد می‌کنیم:
با هربار تغییر مقدار استیت counter از طریق متد setState کامپوننت مجددا ریرندر میشود و مقدار فعلی counter به کاربر نمایش داده خواهد شد.
توجه کنید نمیتوان مانند نمونه مقدار استیت را آپدیت کرد:
موقع استفاده از متد setState میتوان بجای مقدار جدید state، یک callback function به آن داد. این تابع مقدار قبلی state را بعنوان آرگومان ورودی دریافت کرده و باتوجه به آن مقدار جدید state را برگشت میدهد:
میتوان مقدار استیت را از نوع آرایه و یا آبجکت نیز در نظر گرفت. در مثال زیر لیستی از todo را بعنوان state در نظر میگیریم:
