Back to Glossary

State

الحالة (State)

GLS-000077

Beginnerweb-basics1 min read
app statecomponent stateui stateuseStatestate management
Official DocsSign in to save & take notes

Definition

Data that changes over time and causes the UI to update when it changes.

البيانات التي تتغير بمرور الوقت وتُحدّث الواجهة عند تغيّرها.

Why It Matters

State is the core concept that makes React apps dynamic. Without state, a React component is just static HTML. Understanding state is required to build any interactive feature.

State هو المفهوم الأساسي الذي يجعل تطبيقات React ديناميكية. بدون state، مكوّن React مجرد HTML ثابت. فهم state ضروري لبناء أي ميزة تفاعلية.

Full Definition

State is data held by a component (or the app) that can change in response to user actions or data from a server. In React, useState() is the most common way to declare state. When state changes, React re-renders the component. State can be local (inside one component), shared (passed as props), or global (stored in a context or external store).
State هو البيانات التي يحتفظ بها مكوّن (أو التطبيق) يمكن أن تتغير استجابةً لأفعال المستخدم أو البيانات من الخادم. في React، useState() هو الطريقة الأكثر شيوعًا للتصريح بالـ state. عند تغيّر الـ state، يُعيد React تصيير المكوّن. يمكن أن يكون الـ state محليًا (داخل مكوّن واحد) أو مشتركًا (يُمرَّر كـ props) أو عالميًا (مخزّن في سياق أو مخزن خارجي).

Example Usage

“const [bookmarked, setBookmarked] = useState(false) tracks whether a project is bookmarked. Clicking the icon calls setBookmarked(true) and React re-renders the icon as filled.”

“const [bookmarked, setBookmarked] = useState(false) يتتبع ما إذا كان المشروع محفوظًا في الإشارات المرجعية. النقر على الأيقونة يستدعي setBookmarked(true) وReact يُعيد تصيير الأيقونة كمملوءة.”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using State:

1

Mutating state directly instead of using the setter function

2

Storing derived data in state instead of computing it

3

Overusing global state for things that can stay local

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using State.

Explain:
1. What is State and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Mutating state directly instead of using the setter function, Storing derived data in state instead of computing it, Overusing global state for things that can stay local
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account