Как правильно разбивать код на компоненты?
Для того чтобы был смысл в получаемых компонентах, можно пойти например от дизайна, то есть взять и просто разделить дизайн страницы на логические блоки, это будут самые крупные контейнеры, затем в них начать выделять логически отделенные или повторяющиеся элементы.
Данный процесс можно повторять очень долго, но важно остановится в момент когда это уже не несет логической основы.
Также рекомендую посмотреть на подход атомарного дизайна, 
Это статью с точки зрения дизайна sketchapp.me/verstka-sajta-s-pomoshhyu-sketch-i-at...
Это со стороны организации bradfrost.com/blog/post/atomic-web-design
Не привязано к реакту, но хорошо ложится на него.
Не стесняйтесь делать глупые (dumb) компоненты. Негласное правило - метод рендер должен помещаться на одном  экране.  Сделайте отдельный компонент со статистикой, с результатами (или что там у Вас еще).
Компонент для вывода статистики так и просится:<MyStatistic items={[ { titile: 'abc', message:  'cde' } ]}