За какво се използва директивата useState?

useState е React hook, който позволява добавяне на състояние към функционални компоненти. Той връща масив с два елемента: текущата стойност на състоянието и функция за неговото обновяване. При извикване на функцията за обновяване, компонентът се рендерира отново с новата стойност.

Пример за използване:

import { useState } from 'react';

function Counter() {
  // 'count' е текущото състояние, 'setCount' е функцията за неговото обновяване
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Брояч: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Увеличи
      </button>
    </div>
  );
}

Основни характеристики:

• Добавя състояние: Позволява използването на състояние във функционални компоненти, преди това достъпно само в класовете.
• Функция за обновяване: Връща специална функция за промяна на състоянието.
• Рендериране отново: Промяната на състоянието чрез функцията за обновяване кара компонента да се рендерира отново.
• Примитиви и обекти: Може да съхранява всякакви типове данни: числа, низове, булеви стойности, обекти, масиви.
• Ленива инициализация: Началната стойност може да бъде функция, която се изпълнява само при първия рендер, полезно за скъпи изчисления.

const [data, setData] = useState(() => {
  // Скъпи изчисления се изпълняват само веднъж
  const initialData = someExpensiveCalculation();
  return initialData;
});