---
sidebar_position: 4
---

# Состояние и пропсы компонентов

В React состояние (state) и пропсы (props) — это два основных способа управления данными в компонентах. Они позволяют
компонентам быть динамичными и реагировать на изменения данных. Однако они используются в разных ситуациях и имеют свои
особенности.

- **Props** — это данные, которые передаются в компонент извне. Они неизменяемы.
- **State** — это внутренние данные компонента, которые могут изменяться. Состояние делает компонент динамичным и
  реактивным.

## Props (Properties)

Пропсы — это входные данные, которые передаются в компонент извне (обычно от родительского компонента). Они
неизменяемы (immutable), то есть компонент не может изменять свои пропсы, а только читать их.

**Основные особенности:**

1. **Передача данных сверху вниз:** Пропсы передаются от родительского компонента к дочернему.
2. **Неизменяемость:** Компонент не может изменять свои пропсы. Они доступны только для чтения.
3. **Использование:** Пропсы используются для передачи данных, конфигурации или callback-функций в компонент.

## State (Состояние)

Состояние — это внутренние данные компонента, которые могут изменяться со временем. Состояние управляется самим
компонентом и используется для хранения информации, которая может изменяться в результате пользовательских действий,
сетевых запросов или других событий.

**Основные особенности:**

1. **Локальность:** Состояние принадлежит конкретному компоненту и не может быть доступно извне (если не передано через
   пропсы).
2. **Изменяемость:** Состояние можно изменять с помощью метода `setState` (в классовых компонентах) или функции
   обновления
   состояния (в функциональных компонентах с использованием хука `useState`).
3. **Реактивность:** При изменении состояния React автоматически перерисовывает компонент.

## Различия между State и Props

| Характеристика  | Props                                     | State                                         |
|-----------------|-------------------------------------------|-----------------------------------------------|
| Источник данных | Передаются извне (родительский компонент) | Управляются внутри компонента                 |
| Изменяемость    | Неизменяемы (read-only)	                  | Изменяемы (через `setState` или `useState`)   |
| Использование   | Для передачи данных и callback-функций    | Для хранения данных, которые могут изменяться |
| Доступность     | Доступны в дочерних компонентах	          | Локальны для компонента                       |

## Когда использовать Props, а когда State?

- Props:
    - Когда данные передаются от родительского компонента к дочернему.
    - Когда данные не должны изменяться внутри компонента.
    - Для передачи callback-функций, которые могут изменять состояние родительского компонента.

- State:
    - Когда данные должны изменяться внутри компонента (например, в ответ на действия пользователя).
    - Для хранения временных данных, таких как ввод пользователя, состояние загрузки и т.д.

## Взаимодействие State и Props

Часто состояние родительского компонента передается в дочерний компонент через пропсы. Если дочерний компонент должен
изменить эти данные, он может вызвать callback-функцию, переданную через пропсы, которая изменит состояние родительского
компонента.

🚀 **_Источник: DeepSeek_**