Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Все про useState». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`useState()`** - це хук для зберігання стану всередині функціонального компонента. Він дозволяє "запам'ятати" значення між рендерами і оновлювати його, викликаючи повторний рендер компонента. **Ключове:** не можна змінювати стан напряму (`count++`) - оновлення має відбуватись через сеттер (`setCount`).Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що робить `useState()` `useState()` - це **хук для зберігання стану** всередині **функціонального компонента**. Він дозволяє **"запам'ятати" значення** між рендерами і **оновлювати його**, викликаючи повторний рендер компонента. --- ## Синтаксис ```javascript const [state, setState] = useState(initialValue); ``` - `initialValue` - початкове значення стану (число, рядок, об'єкт, масив тощо) - Повертає **масив із двох елементів**: 1. поточне значення стану 2. функцію для його оновлення --- ## Що повертає `useState()` ```javascript const [count, setCount] = useState(0); ``` - `count` - поточне значення стану (наприклад, `0`) - `setCount` - функція, яка **змінює стан** --- ## Як змінити стан Щоб змінити стан, викликаємо функцію `setCount()` із новим значенням: ```javascript setCount(5); ``` або на основі попереднього стану: ```javascript setCount(prev => prev + 1); ``` **Важливо:** Не можна змінювати стан напряму (`count++`), бо React не дізнається, що потрібно перемалювати компонент. Оновлення повинне відбуватись **через сеттер** (`setCount`). --- ## Приклад - лічильник ```javascript import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); // 0 - початкове значення return ( <div> <p>Ви натиснули {count} разів</p> <button onClick={() => setCount(count + 1)}> Збільшити </button> </div> ); } ``` При кожному кліку: 1. Викликається `setCount(count + 1)` 2. React оновлює `count` 3. Компонент **перемальовується** з новим значенням --- ## Оновлення на основі попереднього значення Якщо новий стан залежить від старого, використовуй **функціональну форму**: ```javascript setCount(prev => prev + 1); ``` Це гарантує правильне оновлення, навіть якщо React об'єднує кілька викликів `setCount`. --- ## Що важливо пам'ятати | Правило | Чому | |---|---| | Не змінюй стан напряму (`state = ...`) | React не дізнається про зміну | | Можна зберігати будь-які типи (числа, об'єкти, масиви) | `useState` універсальний | | При виклику `setState` компонент перемальовується | Це викликає новий рендер | | Оновлення асинхронні | React може об'єднувати їх для оптимізації | --- ## Приклад з об'єктом ```javascript const [user, setUser] = useState({ name: "Tim", age: 25 }); // Оновлюємо одне поле setUser(prev => ({ ...prev, age: prev.age + 1 })); ``` Не можна писати `user.age = 26;` - це не змінить стан у React. --- ## Підсумок | Питання | Відповідь | |---|---| | Що робить `useState()` | Додає внутрішній стан у функціональний компонент | | Що повертає `useState()` | Масив: `[поточне значення, функція для зміни]` | | Як змінити стан | Викликати `setState(newValue)` або `setState(prev => nextValue)` |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.