Skip to main content

Що станеться, якщо змінити props напряму?

ReactJunior~2 хв читання
Запропонувати правку

Що таке 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 - це як аргументи функції. Змінювати їх усередині компонента - все одно що переписувати вхідні параметри функції: технічно можна, але це безглуздо і шкідливо.

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

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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