React - useState - przykłady użycia

W tym artykule chcielibyśmy pokazać prosty przykład użycia hooka useState w komponencie funkcyjnym w Reakcie.

Poniższy przykład pokazuje, jak zrobić prosty licznik, który jest inkrementowany przy każdym kliknięciu przycisku button.

W komponencie App tworzymy hook useState, który przechowuje stan naszego komponentu wewnątrz licznika. Bardzo ważne jest używanie hooków na początku komponentów (przed return) - jest to główna zasada obowiązująca w Reakcie.
Do aktualizacji licznika używamy funkcji setCounter, przekazując counter + 1 jako nowy stan - powoduje to ponowne renderowanie komponentu App z nowym stanem.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

//Note: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX
//import React from 'react';

const App = () => {
  const [counter, setCounter] = React.useState(0);
  return (
	<div>
	  <div>Licznik: {counter}</div>
	  <button onClick={() => setCounter(counter + 1)}>Dodaj 1</button>
	</div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Przykład użycia useState w komponentach potomnych

Możliwe jest również zachowanie stanu wewnątrz zagnieżdżonych komponentów. Działa to w ten sam sposób - wymaga użycia funkcji useState().

Sprawdź poniższy przykład, aby zobaczyć, jak to działa:

// ONLINE-RUNNER:browser;

//Note: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX
//import React from 'react';

const ChildComponent = () => {
  const [counter, setCounter] = React.useState(0);
  return (
	<div>
	  <span>[ChildComponent] Licznik: {counter}</span>{' '}
	  <button onClick={() => setCounter(counter + 1)}>Dodaj 1</button>
	</div>
  );
};

const App = () => {
  const [counter, setCounter] = React.useState(0);
  return (
	<div>
      <div>
        <span>[App] Licznik: {counter}</span>{' '}
        <button onClick={() => setCounter(counter + 1)}>Dodaj 1</button>
      </div>
      <ChildComponent />
	</div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );