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

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

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

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

Контент

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

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

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

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

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

## Коротка відповідь

У React можна задати значення `props` за замовчуванням **двома основними способами**:

1. Через **деструктуризацію** (сучасний і рекомендований спосіб)
2. Через `defaultProps` (застарілий, але все ще працює для класів)

---

## 1. Сучасний спосіб - через деструктуризацію

Ти просто вказуєш значення за замовчуванням при отриманні `props`:

```javascript
function Greeting({ name = "Гість" }) {
  return <h1>Привіт, {name}!</h1>;
}
```

Використання:

```javascript
<Greeting name="Тім" />   // Привіт, Тім!
<Greeting />              // Привіт, Гість!
```

React підставить `"Гість"`, якщо `name` не було передано (або `undefined`).

Працює тільки при **відсутності значення** - якщо `name={null}`, значення за замовчуванням не підставиться.

---

## 2. Старий спосіб - через `defaultProps`

Раніше використовувався для класів і функціональних компонентів до появи хуків:

```javascript
function Greeting({ name }) {
  return <h1>Привіт, {name}!</h1>;
}

Greeting.defaultProps = {
  name: "Гість",
};
```

Використання:

```javascript
<Greeting />  // Привіт, Гість!
<Greeting name="Марія" /> // Привіт, Марія!
```

Починаючи з React 17, `defaultProps` офіційно **не рекомендується**
для функціональних компонентів - краще використовувати деструктуризацію.

Але він **все ще працює для класів**:

```javascript
class Greeting extends React.Component {
  static defaultProps = {
    name: "Гість",
  };

render() {
    return <h1>Привіт, {this.props.name}!</h1>;
  }
}
```

---

## 3. Через логічне "АБО" (альтернативний прийом)

Іноді можна задати значення прямо в JSX:

```javascript
function Greeting({ name }) {
  return <h1>Привіт, {name || "Гість"}!</h1>;
}
```

> Але цей спосіб підставить `"Гість"` навіть якщо `name = ""` або `0`,
> тому не завжди підходить (іноді це небажана поведінка).

---

## 4. Комбінований приклад

```javascript
function Profile({ name = "Без імені", age = 18, country = "Не вказано" }) {
  return (
    <div>
      <p>Ім'я: {name}</p>
      <p>Вік: {age}</p>
      <p>Країна: {country}</p>
    </div>
  );
}
```

Використання:

```javascript
<Profile name="Тім" />
// Ім'я: Тім
// Вік: 18
// Країна: Не вказано
```

---

## Підсумок

| Спосіб | Приклад | Рекомендується |
|---|---|---|
| Через деструктуризацію | `function Comp({ prop = "default" }) {}` | Сучасний стандарт |
| Через `defaultProps` | `Comp.defaultProps = { prop: "default" }` | Тільки для класів |
| Через ` |  | ` |

---

**Головна думка:**

> У сучасних React-застосунках краще за все задавати значення `props` за замовчуванням прямо в деструктуризації параметрів функції:
>
> ```javascript
> function Button({ color = "blue", size = "medium" }) {
>   return <button className={`${color} ${size}`}>Кнопка</button>;
> }
> ```

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

Для рев’юера

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

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