Типы компонентов в React

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

Презентационные компоненты предназначены для отображения данных в HTML верстке. При этом такие компоненты не должны иметь стейтов (кроме стейтов, регулирующих режим работы компонента), а данные в них должны передаваться извне с помощью пропсов. То есть такие компоненты просто получают данные из своего родителя и отображают их в нужном виде.

Компоненты-контейнеры как правило содержат в себе стейты с данными, но сами не отображают эти данные, а используют для этого дочерние презентационные компоненты. При этом контейнеры можно вкладывать друг в друга. То есть компонент-контейнер может содержать как презентационные компоненты, так и контейнеры, в свою очередь содержащие презентационные компоненты.

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