Компоненты

Компоненты с понятным контрактом

Передаём данные через props, а действия — через обработчики.

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

Явные входные данные

function ArticleCard({ title, saved, onSave }) {
  return (
    <article>
      <h2>{title}</h2>
      <button onClick={onSave}>
        {saved ? 'Сохранено' : 'Сохранить'}
      </button>
    </article>
  );
}

Родитель хранит saved и передаёт обработчик onSave. Карточка сообщает о действии вызовом функции. Так источник данных остаётся понятным, а один компонент можно использовать с разными статьями.

Props доступны для чтения

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

Практика

Соберите две карточки с разными заголовками и независимым состоянием сохранения. Затем перенесите состояние в общий родительский компонент и добавьте общий счётчик сохранённых материалов.