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

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

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

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

Контент

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

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

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

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

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

## Що таке `props` у React

`props` - це **об'єкт з даними**, який **передається компоненту від батьківського**.
Він використовується тільки для **читання**, а не для зміни.

React вважає, що `props` - це **незмінні (immutable)** дані.
Якщо компонент намагається їх змінити, це **ламає ідею односпрямованого потоку даних**.

---

## Приклад неправильного коду

```javascript
function Greeting(props) {
  props.name = "Alice"; // намагаємося змінити props
  return <h1>Привіт, {props.name}</h1>;
}

function App() {
  return <Greeting name="Tim" />;
}
```

Що відбудеться:

1. React передає в компонент об'єкт `props = { name: "Tim" }`;
2. Ти змінюєш `props.name = "Alice"`;
3. React **не стежить** за цим об'єктом - у нього своя копія даних;
4. При наступному рендері (наприклад, якщо батьківський компонент оновиться) React знову передасть `props = { name: "Tim" }`;
5. Зміна зникає, UI "стрибає", і логіка ламається.

---

## Чому React не реагує на зміну `props`

React **не "спостерігає" за мутаціями об'єктів**.
Він реагує **тільки на оновлення стану (state)** або на нові `props` від батьківського компонента.

Коли ти робиш:

```javascript
props.name = "Alice";
```

React **не бачить**, що відбулася зміна,
і **не запустить повторний рендер**.

---

## Можливі наслідки

| Проблема | Що відбудеться |
|---|---|
| Втрата синхронізації | Дочірній компонент показує одне, батьківський зберігає інше |
| Скидання значень при наступному рендері | React просто перезапише `props` |
| Незрозумілі баги | UI не оновлюється, хоча "здається, що повинен" |
| Складність відлагодження | Логіка компонента стає непередбачуваною |
| Порушення односпрямованого потоку даних | React перестає бути детермінованим |

---

## Як правильно (через state)

Якщо тобі потрібно змінити щось на основі `props`,
створи **копію у внутрішньому стані**:

```javascript
function Greeting({ name }) {
  const [userName, setUserName] = useState(name);

return (
    <>
      <h1>Привіт, {userName}!</h1>
      <button onClick={() => setUserName("Alice")}>Змінити ім'я</button>
    </>
  );
}
```

Тут усе правильно:

- `props.name` використовується тільки як **початкове значення**;
- зміни відбуваються через **state**, за яким React стежить;
- при оновленні `setUserName()` React автоматично **перемалює UI**.

---

## Приклад наочного бага (якщо змінити props)

```javascript
function Counter(props) {
  props.count++; // зміна props
  return <p>Лічильник: {props.count}</p>;
}

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

Що відбудеться:

- Компонент `Counter` щоразу буде збільшувати `props.count` локально;
- Але при наступному рендері React знову передасть **новий об'єкт** `{ count }` з `App`;
- І всі зміни в `Counter` **зникнуть**.

Результат - **непередбачувана поведінка**.

---

## Підсумок

| Питання | Відповідь |
|---|---|
| Чи можна змінювати `props`? | Ні |
| Чому? | Тому що це зовнішні, незмінні дані |
| Що відбудеться при зміні? | React не помітить, рендер не оновиться, дані "загубляться" |
| Як правильно змінювати дані? | Через `state` і `setState` |
| Що порушується при зміні props? | Односпрямований потік даних |

---

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

> У React `props` - це як **аргументи функції**.
> Змінювати їх усередині компонента - все одно що переписувати вхідні параметри функції:
> технічно можна, але це **безглуздо і шкідливо**.

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

Для рев’юера

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

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