Reaktywność stanów w React

Przyjrzyjmy się teraz, jak działa reaktywność. Sprawia ona, że przy zmianie stanu zmiany są natychmiast wyświetlane na ekranie.

Spójrzmy na przykład. Załóżmy, że mamy stan z nazwą produktu:

jsxconst [name, setName] = useState('prod');

Wyświetlmy nazwę produktu w werscie:

jsxreturn <div>
  <span>{name}</span>
</div>;

Stwórzmy teraz przycisk, po kliknięciu którego nasz stan będzie się zmieniać:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

W procedurze obsługi kliknięcia użyjmy funkcji setName, aby ustawić produktowi nową nazwę:

jsxfunction clickHandler() {
  setName('xxxx');
}

Złóżmy cały nasz kod razem. Okaże się, że po naciśnięciu przycisku tekst natychmiast zmieni się na nową wartość:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

Używanie oddzielnych funkcji obsługi nie jest obowiązkowe. Można użyć anonimowej funkcji strzałkowej:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}