Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «State VS props». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

### 1. Що таке **props**

**Props (properties)** - це **вхідні дані** для компонента.
Вони передаються **ззовні**, зазвичай **від батька до дочірнього** компонента.

#### Ключові особливості:

- **Передаються** в компонент (наприклад, через JSX).
- **Незмінні** всередині самого компонента (read-only).
- Використовуються, щоб **налаштувати** компонент ззовні.
- Якщо батько передає нові props - компонент **перемальовується**.

#### Приклад:

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

// Використання
<Greeting name="Alex" />
```

> Тут `name` - це **props**, передані компоненту `Greeting`.

---

### 2. Що таке **state**

**State (стан)** - це **внутрішні дані** компонента,
які **можуть змінюватися з часом** (наприклад, при кліку, введенні, запиті).

#### Ключові особливості:

- **Належить компоненту** (локальні дані).
- **Можна змінювати** (через `useState` або `setState`).
- **Зміна state викликає перемальовування** компонента.
- Використовується, щоб зберігати **динамічний стан** UI.

#### Приклад:

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

> Тут `count` - це **state**, який належить самому компоненту `Counter`.

---

### Головна відмінність:

| Характеристика | **Props** | **State** |
|---|---|---|
| Де зберігається? | У батька | Всередині компонента |
| Чи можна змінити зсередини? | Ні | Так |
| Зміна викликає ререндер? | Так, якщо прийшли нові | Так, якщо викликано setState |
| Хто керує? | Батько | Сам компонент |
| Призначення | Налаштування компонента | Динамічна поведінка |

---

### Аналогія

Уяви компонент як **функцію з пам'яттю**:

- `props` - це **вхідні аргументи функції**.
- `state` - це **локальні змінні**, які зберігаються між викликами.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати259 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.