Хуки
Хуки - це просто спеціальні функції, за допомогою яких можна «підключитися» до різних можливостей React. Стан - це лише одна з їх можливостей. Якщо ви бажаєте використовувати хук, імпортуйте його в файлі компонента з бібліотеки React.
Хук useState
Варіант змінної, зміна значення котрої повідомить реакту що потрібно перемалювати відображення значення цієї змінної на формі. Єдиним аргументом для 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>} </> ); };
різне
- стан є повністю приватним для компонента, що його визначає. Батьківський компонент не може його змінити. Це дозволяє додавати стан до будь-якого компонента чи видаляти його без впливу на решту компонентів
- Будь-які хуки можна викликати лише на верхньому рівні функції компонента. Це означає, що вони повинні знаходитися безпосередньо в тілі функції компонента, а не всередині циклів, умов, вкладених функцій і так далі. Такі обмеження спрощують написання логіки компонента та роблять код більш читабельним.
- Якщо потрібно встановиити сет-ом тільки одне значення обекта а іньші залишитии як і були, то можна «розпилити» setDrinks({…drinks, myField: newValue})