Hooki to nowa funkcjonalność React, dzięki której możemy „zahaczyć” o jego wewnętrzne mechanizmy, co ułatwia pisanie aplikacji. Pierwszy z hook-ów, który chcę przedstawić nazywa się useState i jest to hook, który pozwala korzystać ze stanu w komponencie funkcyjnym (przed wprowadzeniem hook-ów w komponentach funkcyjnych nie można było korzystać ze stanów, dlatego nazywały się one komponentami bezstanowymi. Teraz nazwa została zmieniona na komponenty funkcyjne).

UseState zwraca zmienną przechowującą lokalny stan oraz funkcję do jego aktualizacji. Inaczej mówiąc – hook ten przechowuje wartość naszego stanu oraz funkcję, która może go modyfikować:

const [state, setState] = useState(initialState);

Oznacza to, że możesz ustawić swój stan początkowy w zmiennej stanu i zmienić go za pomocą funkcji setState. State i setState to tylko nazwy, więc możesz wybrać inne nazwy, takie jak counter i setCounter. W jednym komponencie można użyć dowolnej liczby hook-ów useState:

const HookExample = () => {

    // state 1 - Declaring new state variable, called "counter"
    const [counter, setCounter] = useState(0);
    // state 2 - Declaring new state variable, called "string"
    const [string, setString] = useState("Hello Word");
  return (
    <div className="App">
      <p> Counter: {counter} </p>
      <p> String: {string} </p>
      <button onClick={() => setCounter(val => val + 1)} > Add 1 </button>
      <button onClick={() => setString("useState hook is easy :)")} > Change text </button>
    </div>
  );
}

Zobacz DEMO i sprawdź, jak działa hook useState

Kod do tego postu możesz naleźć tu: https://github.com/love-coding-pl/React-Hooks-Examples/tree/Hook-1-useState