Что такое пропы в Реакте?

Пропы (props) — это свойства, которые передаются в компонент. Пропы были созданы, чтобы обеспечить передачу данных от родительского компонента к дочернему. Пропы всегда неизменны в пределах компонента, получившего их. Если значения пропов изменились (поступили новые пропы из родительского компонента), то происходит перерисовка компонента.

Пропы передаются в компонент по аналогии с атрибутами в HTML-тегах:

<User name="Иван" surname="Иванов" />

И используются в классовом компоненте (в виде объекта со свойствами, имена которых совпадают с именами атрибутов выше):

class User extends React.Component {
    render() {
        const { name, surname } = this.props;
        return <div>Пользователя зовут {surname} {name} </div>;
    }
}

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

function User(props) {
    const { name, surname } = props;
    return <div>Пользователя зовут {surname} {name} </div>;
}

Примечание: Чтобы инициализировать пропы, не обязательно реализовывать конструктор, так как их инициализация уже предусмотрена в классе React.Component. Однако если в конструкторе предусмотрен другой код (например, установка исходного состояния или привязка обработчиков), то обязательно нужно вызвать super(props) внутри конструктора, чтобы сработал код конструктора из класса React.Component.