xuk_usestate [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Хуки ======
**Хуки** - це просто спеціальні функції, за допомогою яких можна "підключитися" до різних можливостей React. Стан - це лише одна з їх можливостей.
Якщо ви бажаєте використовувати хук, імпортуйте його в файлі компонента з бібліотеки React.

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

Кожного разу, коли компонент рендериться, useState повертає масив, що містить два значення:
  * Змінна **clicks** зі збереженим поточним значенням.
  * Функцію встановлення стану **setClicks**, яка може оновлювати змінну стану і викликати повторний рендеринг компонента.

<code>
import { useState } from 'react';

const App = () => {
	const [clicks, setClicks] = useState(0);

  const handleClick = () => {
		setClicks(clicks + 1);
  };

	return <button onClick={handleClick}>Current: {clicks}</button>
};

</code>
===== Декілька станів =====
Ви можете мати стільки змінних стану, скільки потрібно в одному компонентії. Для кожного використовуйте окремий useState.
<code>
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>}
    </>
  );
};

</code>
===== різне =====
  - стан є повністю приватним для компонента, що його визначає. Батьківський компонент не може його змінити. Це дозволяє додавати стан до будь-якого компонента чи видаляти його без впливу на решту компонентів
  - Будь-які хуки можна викликати лише на верхньому рівні функції компонента. Це означає, що вони повинні знаходитися безпосередньо в тілі функції компонента, а не всередині циклів, умов, вкладених функцій і так далі. Такі обмеження спрощують написання логіки компонента та роблять код більш читабельним.
  - Якщо потрібно встановиити сет-ом тільки одне значення обекта а іньші залишитии як і були, то можна "розпилити"  **setDrinks({...drinks, myField: newValue})**