کد زیر را در نظر بگیرید :



در کد بالا، state یک متغیر است که نشان‌دهندهٔ وضعیت فعلی کامپوننت Counter است. این وضعیت می‌تواند اطلاعاتی را که برای کامپوننت مهم است، شامل کند و توسط کامپوننت برای رسم رابط کاربری (UI) و انجام عملیات مربوطه استفاده می‌شود.

در این مثال، state شامل یک شیء است که یک ویژگی به نام value دارد که مقدار اولیه آن برابر با صفر است. این value مقدار تعداد دفعاتی که کاربران با فشردن دکمه کلیک کرده اند، نمایش می دهد.

هرگاه که increment فراخوانی شود (که در واقع تابعی است که با کلیک بر روی دکمه فراخوانی می‌شود)، مقدار value افزایش پیدا می‌کند و این تغییر در وضعیت (state) به صورت واکنشی (reactive) در UI نمایش داده می‌شود، به این ترتیب که مقدار value جدید نمایش داده می‌شود.

 متغیر state به وسیلهٔ hook useState تعریف شده است. این hook useState از کتابخانه owl استفاده می‌کند و یک شیء را با یک مقدار اولیه میسازد.

پس برای مقداردهی اولیه به state، در تابع useState یک شیء با مقادیر مورد نیاز ایجاد می‌کنید. به عنوان مثال، مقدار اولیه در اینجا به صفر تنظیم شده است.