fullstack.org.ua

Що таке State у React · fullstack.org.ua

Початковий11 хв· Fullstack Team

Що таке State у React

Розберемо, що таке локальний стан компонента, навіщо він потрібен і чим відрізняється від звичайних змінних.

Що таке стан компонента

State, або стан, — це дані, які належать компоненту та можуть змінюватися під час його роботи.

Стан потрібен, коли компонент має:

запам’ятовувати дії користувача;
відображати різні дані залежно від ситуації;
оновлювати інтерфейс після зміни даних;
зберігати тимчасову інформацію, наприклад значення лічильника чи текст у полі введення.

Наприклад, лічильник має зберігати своє поточне значення. Після натискання кнопки це значення збільшується, а компонент показує оновлений результат.

Звичайні змінні та state

У звичайному JavaScript можна створити змінну:

javascript

let count = 0;

count += 1;

jsx

function Counter() {
  let count = 0;

  function handleClick() {
    count += 1;
    console.log(count);
  }

  return (
    <button onClick={handleClick}>
      Натиснуто: {count}
    </button>
  );
}

jsx

import { useState } from 'react';

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

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

  return (
    <button onClick={handleClick}>
      Натиснуто: {count}
    </button>
  );
}

export default Counter;

jsx

import { useState } from 'react';

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

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

  return (
    <div>
      <p>Поточне значення: {count}</p>
      <button onClick={increase}>
        Збільшити
      </button>
    </div>
  );
}

export default Counter;

jsx

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

function App() {
  return (
    <main>
      <Counter />
      <Counter />
    </main>
  );
}

export default App;

jsx

import { useState } from 'react';

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

  return (
    <div>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="Введіть ім’я"
      />

      <p>Привіт, {name || 'незнайомцю'}!</p>
    </div>
  );
}

export default Greeting;

jsx

import { useState } from 'react';

function Details() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Сховати' : 'Показати'} деталі
      </button>

      {isVisible && <p>Додаткова інформація доступна.</p>}
    </div>
  );
}

export default Details;

jsx

import { useState } from 'react';

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

  function increaseTwice() {
    setCount((previousCount) => previousCount + 1);
    setCount((previousCount) => previousCount + 1);
  }

  return (
    <div>
      <p>Значення: {count}</p>
      <button onClick={increaseTwice}>
        Збільшити двічі
      </button>
    </div>
  );
}

export default Counter;

jsx

function Example({ shouldUseState }) {
  if (shouldUseState) {
    // Неправильно: хук викликається умовно
    const [value, setValue] = useState(0);
  }

  return <div>Приклад</div>;
}

jsx

import { useState } from 'react';

function TodoList() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  function handleSubmit(event) {
    event.preventDefault();

    const trimmedTask = task.trim();

    if (!trimmedTask) {
      return;
    }

    setTasks((previousTasks) => [
      ...previousTasks,
      {
        id: crypto.randomUUID(),
        text: trimmedTask,
      },
    ]);

    setTask('');
  }

  return (
    <section>
      <h1>Список завдань</h1>

      <form onSubmit={handleSubmit}>
        <input
          value={task}
          onChange={(event) => setTask(event.target.value)}
          placeholder="Нове завдання"
        />

        <button type="submit">
          Додати
        </button>
      </form>

      <ul>
        {tasks.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    </section>
  );
}

export default TodoList;