> Что такое пропсы в React компонентах (React)

Короткий ответ

Пропсы (props) - это входные данные React-компонента, передаваемые от родительского компонента. Они представляют собой объект с произвольными значениями, доступный только для чтения. Пропсы позволяют делать компоненты переиспользуемыми и конфигурируемыми, передавая им различные данные и функции обратного вызова.

Подробное объяснение

Props (сокращение от properties) - это механизм передачи данных от родительского компонента к дочернему в React. Когда родительский компонент рендерит дочерний, он может передать ему любые значения в виде атрибутов JSX. React собирает все переданные атрибуты в один объект и передаёт его дочернему компоненту как первый аргумент функции (в функциональных компонентах) или через this.props (в классовых).

Ключевая особенность пропсов - они иммутабельны (неизменяемы). Компонент не должен изменять свои пропсы напрямую. Если нужно изменить данные, это должна делать родительская логика, передавая новые пропсы. Это следует принципу однонаправленного потока данных (unidirectional data flow) в React.

Пропсы могут содержать любые типы данных: строки, числа, объекты, массивы, функции, React-элементы и даже другие компоненты. Функции, переданные как пропсы, часто используются для обратной связи с родительским компонентом (callback props).

На практике

На практике пропсы - основной способ конфигурации компонентов. Типичные сценарии:

• Передача данных для отображения (текст, изображения, списки)
• Передача функций-обработчиков событий (onClick, onSubmit)
• Передача стилей или классов
• Управление состоянием через controlled components (value + onChange)
• Передача дочерних элементов через children prop

Для типизации пропсов в TypeScript используют интерфейсы или типы. Валидация пропсов в runtime возможна через PropTypes (но в современных проектах чаще используют TypeScript).

Пример кода

JSX
// Родительский компонент
function Parent() {
  const user = { name: 'Анна', age: 25 };
  
  return (
    <Child 
      name={user.name}
      age={user.age}
      onGreet={(name) => console.log(`Привет, ${name}!`)}
    />
  );
}

// Дочерний компонент
function Child(props) {
  // props = { name: 'Анна', age: 25, onGreet: fn }
  
  return (
    <div>
      <p>Имя: {props.name}</p>
      <p>Возраст: {props.age}</p>
      <button onClick={() => props.onGreet(props.name)}>
        Поздороваться
      </button>
    </div>
  );
}

// С деструктуризацией и children
function Button({ variant = 'primary', children, onClick }) {
  return (
    <button 
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// Использование
<Button variant="danger" onClick={handleDelete}>
  Удалить
</Button>

Как отвечать на собеседовании

Начни с простого определения: пропсы - это аргументы компонента. Подчеркни, что они только для чтения и передаются от родителя к потомку. Упомяни, что пропсы могут быть любого типа, включая функции. Если спросят про отличие от state - скажи, что state управляется внутри компонента и может меняться, а props приходят извне и неизменны для компонента. Можно добавить про children prop как специальный пропс для композиции.

Что проверяет интервьюер

Интервьюер проверяет понимание базовой концепции React: однонаправленный поток данных, иммутабельность пропсов, отличие от state, механизм передачи данных между компонентами. Для junior достаточно знать, что пропсы - это способ передать данные в компонент и что их нельзя изменять внутри компонента.

Типичные ошибки

• Попытка изменить пропсы напрямую (props.name = 'Новое имя')
• Путаница между props и state
• Передача слишком большого количества пропсов вместо использования композиции
• Изменение объектов/массивов, переданных через пропсы (мутация)
• Использование пропсов без деструктуризации, что делает код менее читаемым
• Переопределение пропсов внутри компонента (props = something)