Suggest an edit

Improve this article

Refine the answer for “State VS props”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

### 1. What is **props**

**Props (properties)** are **input data** for a component.
They are passed **from the outside**, usually **from a parent to a child** component.

#### Key characteristics:

- **Passed** into the component (for example, via JSX).
- **Immutable** inside the component itself (read-only).
- Used to **configure** the component from the outside.
- If the parent passes new props, the component **re-renders**.

#### Example:

```javascript
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Usage
<Greeting name="Alex" />
```

> Here `name` is **props** passed to the `Greeting` component.

---

### 2. What is **state**

**State** is a component's **internal data**
that **can change over time** (for example, on a click, input, or request).

#### Key characteristics:

- **Belongs to the component** (local data).
- **Can be changed** (via `useState` or `setState`).
- **Changing state triggers a re-render** of the component.
- Used to store the **dynamic state** of the UI.

#### Example:

```javascript
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}
```

> Here `count` is **state** belonging to the `Counter` component itself.

---

### Main difference:

| Characteristic | **Props** | **State** |
|---|---|---|
| Where is it stored? | In the parent | Inside the component |
| Can it be changed internally? | No | Yes |
| Does changing it trigger a re-render? | Yes, if new ones arrive | Yes, if setState is called |
| Who controls it? | The parent | The component itself |
| Purpose | Configuring the component | Dynamic behavior |

---

### Analogy

Think of a component as a **function with memory**:

- `props` are the **function's input arguments**.
- `state` consists of **local variables** that persist between calls.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts300 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.