React.js. Когда использовать компонент?

Чем руководствовать при создании компонента в react? Его функциональностью и изменяемостью или логической структурой приложения?
Допустим, имеется главная страница

блок 1 и блок 3, как понимаю, однозначно должны описываться как компоненты, потому что представляют собой функциональные блоки.
блоки 2 - входят в навбар и тоже описываются как компоненты.
блок 3 - отдельный компонент, содержит дудл, строку поиска и кнопки поиска. Строка поиска и кнопки это отдельные компоненты? А нужно ли выделять дудл в отдельный компонент (допустим он никогда не меняется)?
блок 4 - футер. Описывать его отдельным компонентом, если он всегда неизменен? Или его включать в компонент, который описывает целиком главную страницу?

Ответ

Контейнер (container или умный компонент) - это компонент унаследованный от Component и содержащий логику и/или изменяющий свое состояние и не имеющий собственных стилей. Используется для порождения и инициализации других компонентов. Его так же можно назвать statefull. Презентационный (presentational или глупый компонент) - это компонент унаследованный от Component не имеющий логики и не изменяющий свое состояние. Может иметь собственные стили. Так же его называют еще stateless. Применяется для отображения данных, как правило полученных через props. Сейчас его использовать нет смысла, так как для его замены был создан новый вид компонентов описываемый ниже. Функциональные (или глупые компоненты так же являющиеся презентационными) - это компоненты-функции которые не имеют логики и не хранят состояние и имеют собственные стили. Так же называются stateless. В их обязанность входит отображать данные полученные через props Чистый (pure) - компонент унаследованный от PureComponent, может относится как к первой категории так и второй и третей. В его задачу входит производить неглубокое сравнение состояния компонента чтобы избежать лишнего рендера и избавить программиста от написания лишней проверки.
Этого должно хватить для понимания где что и когда использовать, но все равно добавлю, что лучше писать как можно меньше компонентов-контейнеров.
Что касается понимания когда использовать компонента, а когда элемент, то проще объяснить на простом примере -
// так можно, но лучше не делать

// так будет более правильно const ButtonGroup = ({children}) => (

{children}

);

И раз уж зашел разговор о компонентах, то не могу не упомянуть о такой важной составляющей, как стиль компонентной композиции. Очень часто я вижу подобное -

Но лично я предпочитаю и поэтому советую писать вот так -

Ведь очень часто бывает так, что из головы вылетают детали собственного приложения и очень важно суметь освежить его в памяти одним охватом. А для людей которые впервые знакомятся с кодом второй вариант вообще подарок, так как очень сложно воссоздать в голове приложение не по дереву, а по классам из файлов. Но есть исключения, когда кода будет действительно много, то придется делать как в первом варианте, но все равно стараться как можно больше уместить в одном компоненте. Просто очень часто вижу как пишут App => Header + Footer. Идешь в Header, а там только один компонент, как например ButtonGroup. Потом идешь в этот ButtonGroup а там ещё один компонент. И так пока дойдешь до последнего уже забываешь откуда пришел и зачем.
А что качается конкретно Вашего случая, то минимум мог бы выглядеть так -