Хук useState

Хуки - це просто спеціальні функції, за допомогою яких можна «підключитися» до різних можливостей React. Стан - це лише одна з їх можливостей, але ви зустрінете інші хуки пізніше. Якщо ви бажаєте використовувати хук, імпортуйте його в файлі компонента з бібліотеки React.

Єдиним аргументом для useState є початкове значення змінної стану. У цьому прикладі початкове значення clicks встановлено на 0 за допомогою useState(0)

Кожного разу, коли компонент рендериться, useState повертає масив, що містить два значення:

Змінна (clicks) зі збереженим поточним значенням.

Функцію встановлення стану (setClicks), яка може оновлювати змінну стану і викликати повторний рендеринг компонента.

import { useState } from 'react';
const App = () => {
const [clicks, setClicks] = useState(0);
const handleClick = () => {
setClicks(clicks + 1);
};
return <button onClick={handleClick}>Current: {clicks}</button>
};

Декілька станів

Ви можете мати стільки змінних стану, скільки потрібно в одному компонентії. Для кожного використовуйте окремий useState.

const App = () => {
const [clicks, setClicks] = useState(0);
const [isOpen, setIsOpen] = useState(false);
const handleClick = () => {
setClicks(clicks + 1);
};
const handleToggle = () => {
setIsOpen(!isOpen);
};
return (
<>
<button onClick={handleClick}>Current: {clicks}</button>
<button onClick={handleToggle}>{isOpen ? "Hide" : "Show"}</button>
{isOpen && <p>Now you can see me!</div>}
</>
);
};

різне

стан є повністю приватним для компонента, що його визначає. Батьківський компонент не може його змінити. Це дозволяє додавати стан до будь-якого компонента чи видаляти його без впливу на решту компонентів

Будь-які хуки можна викликати лише на верхньому рівні функції компонента. Це означає, що вони повинні знаходитися безпосередньо в тілі функції компонента, а не всередині циклів, умов, вкладених функцій і так далі. Такі обмеження спрощують написання логіки компонента та роблять код більш читабельним.