Пошук уроків, статей та іншого контенту
Навчимося створювати стан за допомогою useState, читати його значення та задавати початковий стан.
Стан — це дані компонента, які можуть змінюватися під час роботи застосунку.
Наприклад:
кількість натискань на кнопку;
текст у полі введення;
чи відкрито меню;
вибраний елемент зі списку.
Для створення стану в React використовують хук useState.
useStateСпочатку потрібно імпортувати useState з React:
import { useState } from 'react';Потім викликати його всередині функціонального компонента:
const [count, setCount] = useState(0);useState(0) створює стан із початковим значенням 0.
Результатом є масив із двох елементів:
count — поточне значення стану;
setCount — функція для зміни стану.
Назви можна обирати самостійно, але зазвичай функцію зміни називають із префіксом set:
const [name, setName] = useState('Олена');У цьому прикладі:
name містить поточне ім’я;
setName змінює ім’я;
'Олена' є початковим значенням.
Значення стану можна використовувати в JSX так само, як звичайну змінну:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Натискань: {count}</p>
</div>
);
}
export default Counter;Спочатку на сторінці буде показано:
Натискань: 0React підставляє поточне значення count у JSX.
Щоб змінити стан, потрібно викликати функцію, яку useState повертає другою:
setCount(1);Але зазвичай нове значення обчислюють на основі поточного:
setCount(count + 1);Після зміни стану React повторно відобразить компонент, і на сторінці з’явиться нове значення.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function handleIncrement() {
setCount(count + 1);
}
return (
<div>
<p>Натискань: {count}</p>
<button onClick={handleIncrement}>
Збільшити
</button>
</div>
);
}
export default Counter;Після кожного натискання:
викликається handleIncrement;
викликається setCount;
значення count збільшується на одиницю;
React повторно відображає компонент.
Початкове значення передають у useState як аргумент.
const [age, setAge] = useState(18);const [message, setMessage] = useState('Привіт!');const [isVisible, setIsVisible] = useState(false);const [items, setItems] = useState([]);const [user, setUser] = useState({
name: 'Олена',
role: 'Розробниця',
});Тип початкового значення визначає, з яким типом даних працюватиме стан.
import { useState } from 'react';
function Profile() {
const [name, setName] = useState('Олена');
const [isOnline, setIsOnline] = useState(false);
function handleNameChange() {
setName('Марія');
}
function handleStatusChange() {
setIsOnline(!isOnline);
}
return (
<section>
<h2>Профіль</h2>
<p>Ім’я: {name}</p>
<p>Статус: {isOnline ? 'онлайн' : 'офлайн'}</p>
<button onClick={handleNameChange}>
Змінити ім’я
</button>
<button onClick={handleStatusChange}>
Змінити статус
</button>
</section>
);
}
export default Profile;Тернарний оператор у цьому рядку:
{isOnline ? 'онлайн' : 'офлайн'}показує різний текст залежно від значення isOnline.
useState на верхньому рівні компонентаПравильно:
function Counter() {
const [count, setCount] = useState(0);
return <p>{count}</p>;
}Не слід викликати хук усередині умови, циклу або іншої функції:
function Counter({ enabled }) {
if (enabled) {
// Так робити не потрібно
const [count, setCount] = useState(0);
}
return <p>Лічильник</p>;
}useState потрібно викликати безпосередньо у функціональному компоненті, до return.
Неправильно:
count = count + 1;Правильно:
setCount(count + 1);Саме функція оновлення повідомляє React, що стан змінився і компонент потрібно відобразити знову.
Аргумент useState використовується як початкове значення під час створення стану:
const [count, setCount] = useState(0);Щоб змінити count пізніше, використовуйте setCount, а не повторний виклик useState.
Якщо використовується useState, його потрібно імпортувати:
import { useState } from 'react';У JSX значення JavaScript потрібно писати у фігурних дужках:
<p>{count}</p>А не як звичайний текст:
<p>count</p>У другому випадку на сторінці буде показано слово count, а не його значення.
Неправильно:
setCount();Якщо стан має отримати конкретне значення, передайте його:
setCount(10);Або обчисліть нове значення на основі поточного:
setCount(count + 1);useState повертає спочатку значення, а потім функцію його оновлення:
const [count, setCount] = useState(0);Тому не варто міняти їх місцями:
const [setCount, count] = useState(0);useState створює стан функціонального компонента.
useState повертає пару: поточне значення і функцію для його зміни.
Початковий стан передають аргументом: useState(initialValue).
Значення стану читають у JSX через фігурні дужки.
Стан змінюють за допомогою функції оновлення, наприклад setCount(count + 1).
Після зміни стану React повторно відображає компонент.
useState потрібно викликати на верхньому рівні компонента.