How to organize a website page using React?

Question

React

I have a page that I want to make with React. This is a simple ToDo List. The whole page is divided into 3 parts (header, content, footer). Header menu + line for search, content - ToDo List itself, footer - useful links, something else.

My question is this: How is it easier (more correct, more convenient) to make the whole page 1 component (which means one state) or make several separate components (for example 3 - for each part of the page)? What is usually done in such situations?

Why the question arose: on the one hand, if there is one component, then it can be initialized with one request to the server, its parts are easier to change if they depend on a common state. On the other hand, it is easier to work with smaller components.