Передача данных через props

Передача данных через props — основной механизм обмена информацией между компонентами в React. Все данные передаются строго сверху вниз: от родительского компонента к дочернему. Это обеспечивает предсказуемость и упрощает отладку, так как источник данных всегда можно проследить по иерархии компонентов.

Что такое props

Props (сокращение от «properties») — это аргументы, которые передаются в функциональный компонент, как параметры в обычную функцию. Они могут содержать любые типы данных: строки, числа, булевы значения, массивы, объекты, а также функции.

В JSX props указываются как атрибуты:

<UserCard name="Алиса" age={30} />

Внутри компонента они доступны через параметр функции:

function UserCard(props) {
  return <div>{props.name}, {props.age} лет</div>;
}

Часто используется деструктуризация для удобства:

function UserCard({ name, age }) {
  return <div>{name}, {age} лет</div>;
}

Передача функций как props

Одна из ключевых практик — передача колбэков из родителя в дочерний компонент. Это позволяет дочернему компоненту запрашивать изменения состояния, не владея им напрямую.

Пример:

// Родитель
function App() {
  const [count, setCount] = useState(0);
  return <CounterButton onIncrement={() => setCount(count + 1)} />;
}

// Дочерний
function CounterButton({ onIncrement }) {
  return <button onClick={onIncrement}>+1</button>;
}

Такой подход сохраняет единственный источник истины (single source of truth) и избегает прямого мутирования данных.

Правила работы с props

Работа с props в React подчиняется строгим правилам, которые обеспечивают предсказуемость, читаемость и стабильность компонентного дерева. Эти правила — основа архитектуры React и помогают избежать распространённых ошибок.

Props — только для чтения

Дочерний компонент никогда не должен мутировать полученные props. Любая попытка присвоить значение напрямую (props.value = newValue) нарушает иммутабельность и может привести к неожиданному поведению. Если компоненту нужно «изменить» данные, он должен вызвать переданную функцию-колбэк, а не трогать props.

Передача данных — только сверху вниз

Данные в React текут строго от родителя к дочернему компоненту. Нельзя «подтянуть» данные снизу вверх без явного механизма (например, колбэка). Это упрощает отладку: чтобы понять, откуда пришло значение, достаточно подняться по иерархии компонентов.

Если нужно изменить данные — передайте функцию

Когда дочернему компоненту требуется инициировать изменение состояния, родитель должен передать функцию через props. Дочерний компонент вызывает её, но не управляет самим состоянием. Это сохраняет единый источник истины и изолирует логику управления данными.

Избегайте избыточных или «мусорных» props

Передавайте только те данные, которые действительно нужны компоненту. Не передавайте весь объект состояния, если используется лишь одно поле. Это улучшает переиспользуемость, упрощает тестирование и снижает риск ненужных ререндеров.

Типизируйте props (в TypeScript) или документируйте (в JS)

Чёткое определение ожидаемых props помогает другим разработчикам (и вам в будущем) понимать интерфейс компонента. В JavaScript это можно делать через JSDoc, в TypeScript — через интерфейсы или типы.