State VS props

ReactMiddle~1 хв читання

1. Що таке props

Props (properties) - це вхідні дані для компонента. Вони передаються ззовні, зазвичай від батька до дочірнього компонента.

Ключові особливості:

Передаються в компонент (наприклад, через JSX).
Незмінні всередині самого компонента (read-only).
Використовуються, щоб налаштувати компонент ззовні.
Якщо батько передає нові props - компонент перемальовується.

Приклад:

javascript

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Використання
<Greeting name="Alex" />

Тут name - це props, передані компоненту Greeting.

2. Що таке state

State (стан) - це внутрішні дані компонента, які можуть змінюватися з часом (наприклад, при кліку, введенні, запиті).

Ключові особливості:

Належить компоненту (локальні дані).
Можна змінювати (через useState або setState).
Зміна state викликає перемальовування компонента.
Використовується, щоб зберігати динамічний стан UI.

Приклад:

javascript

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Тут count - це state, який належить самому компоненту Counter.

Головна відмінність:

Характеристика	Props	State
Де зберігається?	У батька	Всередині компонента
Чи можна змінити зсередини?	Ні	Так
Зміна викликає ререндер?	Так, якщо прийшли нові	Так, якщо викликано setState
Хто керує?	Батько	Сам компонент
Призначення	Налаштування компонента	Динамічна поведінка

Аналогія

Уяви компонент як функцію з пам'яттю:

props - це вхідні аргументи функції.
state - це локальні змінні, які зберігаються між викликами.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.