Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чи можна змінювати props всередині компонента?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Ні, props всередині компонента змінювати не можна.** `props` (від "properties") - це **вхідні дані**, які **передаються компоненту його батьком**. Вони працюють **як аргументи функції** і за правилами React мають бути **лише для читання (immutable)**. **Ключове:** якщо потрібно змінювати дані, потрібно створити власний `state` на основі `props`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Коротка відповідь:** **Ні, 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`.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.