Skip to main content

Чи можна змінювати props всередині компонента?

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

Коротка відповідь: Ні, props всередині компонента змінювати не можна.

Чому не можна змінювати props

props (від "properties") - це вхідні дані, які передаються компоненту його батьком. Вони працюють як аргументи функції - і за правилами React мають бути лише для читання (immutable).

Іншими словами:

Компонент приймає props, але не володіє ними. Змінювати їх - означає ламати принцип односпрямованого потоку даних.

Приклад (що буде, якщо спробувати змінити props)

javascript
function Greeting(props) { props.name = "Марія"; // Так робити не можна! return <h1>Привіт, {props.name}</h1>; }

React не видасть помилку, але це погана практика, бо такі зміни:

  • не впливають на батьківський компонент (дані не оновляться);
  • роблять поведінку непередбачуваною;
  • можуть бути перезаписані під час наступного рендеру.

Правильний спосіб - використовувати state, якщо потрібно змінювати дані

Якщо тобі потрібно, щоб дані змінювалися всередині компонента, створи власний стан (state) на основі props.

javascript
function Greeting({ name }) { const [username, setUsername] = useState(name); const changeName = () => setUsername("Марія"); return ( <> <h1>Привіт, {username}!</h1> <button onClick={changeName}>Змінити ім'я</button> </> ); }

Тепер username - внутрішній стан компонента, і React буде коректно оновлювати UI при його зміні.

Чому це важливо (логіка React)

React дотримується принципу "one-way data flow" - дані течуть лише згори вниз:

javascript
Батько → Дочірній компонент → JSX

Якщо дочірній компонент почне змінювати props, ланцюжок стане непередбачуваним, і React не зможе гарантувати узгодженість UI.

Що можна робити з props безпечно

Можна:

  • читати їх
  • використовувати для обчислень
  • копіювати в state під час ініціалізації
  • передавати далі іншим компонентам

Не можна:

  • змінювати props напряму (props.x = ...)
  • мутувати вкладені об'єкти всередині props (props.user.name = ...)

Приклад правильного підходу

javascript
function Counter({ initialCount }) { const [count, setCount] = useState(initialCount); return ( <> <p>Лічильник: {count}</p> <button onClick={() => setCount(count + 1)}>+</button> </> ); }

Батько:

javascript
<Counter initialCount={5} />

Тут initialCount - prop, а count - state, який можна змінювати.

Підсумок

ЩоМожна?Чому
Читати propsТакЦе вхідні дані
Змінювати props напрямуНіПорушує односпрямований потік даних
Створити копію в state і змінюватиТакКомпонент контролює свій стан
Мутувати вкладені об'єкти в propsНіReact не відстежує такі зміни

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

props - це параметри компонента, як аргументи функції. Їх не можна змінювати. Якщо потрібно змінювати дані - використовуй state.

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

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

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

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