Przykłady użycia hooka useState w React

Hook useState w React umożliwia zarządzanie stanem komponentu. Poniżej przedstawiono różne przykłady jego użycia, które ilustrują zarządzanie wartością liczbową, łańcuchem znaków oraz obiektami.

1. Inicjalizacja stanu z wartością liczbową

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}
    

2. Inicjalizacja stanu z wartością tekstową

const [name, setName] = useState('');

function updateName(e) {
  setName(e.target.value);
}
    

3. Zarządzanie obiektami za pomocą useState

Możemy przechowywać i aktualizować złożone obiekty, np. obiekty reprezentujące użytkowników.

const [user, setUser] = useState({ name: '', age: 0 });

function updateUserName(e) {
  setUser({ ...user, name: e.target.value });
}

function updateUserAge(e) {
  setUser({ ...user, age: e.target.value });
}
    

Podsumowanie

Hook useState pozwala na dynamiczne zarządzanie stanem w komponentach React. W zależności od potrzeb, możemy używać go do aktualizowania wartości liczbowych, tekstowych oraz złożonych obiektów.