Should state only be in a root component?

Question

This may be considered as an opinionated question, but I was wondering if it is best to keep state at the root of the component.

For example, suppose have a form. The form has sections that correspond to different information that is requested to a user. The parent form contains all the state to be filled up and it passes it down to the sections

export default function Form() {
    const [state1, setState1] = useState();
    const [state2, setState2] = useState();
    const [state3, setState3] = useState();
    return (
        <>
            <Section1 state={state1} setState={setState1} />
            <Section2 state={state2} setState={setState2} />
            <Section3 state={state3} setState={setState3} />
        </>
    )
}

Now let's say for some reason, <Section2 /> needs some sort of loading state

export default function Section2() {
    return (
        <div>
            {!loading ? ....} //do something with loading
        </div>
    )
}

1. Should I put this loading state and its handle function up to the <Form /> parent even though the parent doesn't have any use for this state?
2. If I should place this state in the parent, and <Section2 /> updates it, doesn't that mean that every other section will re-render as well even though only <Section2 /> needs this? Does that have impact on performance?

I've been reading through best react design patterns and some say it is best to keep the state and handle functions at the root component. A concept of stateless and stateful components, or smart and dumb.

Answer 1

1. You can do so, but you should lift up the state to the parent in case that there is a need for that loading state in other siblings components (like section1/section3). If it's not the situation, you should keep the state closer it's used to avoid performance issues, that's lead us to your second question.
2. React re-render components due to state/props changes, so if the component's state changes it will re-render, or if another component consumes some props that changed, it will also cause a re-render.
   In a lot of cases this re-renders doesn't affect the website, so you will not even recognize those re-renders, but as the app grows up, it can impact the performance and that makes things be laggy.

Answer 2

Should I put this loading state and its handle function up to the parent even though the parent doesn't have any use for this state?

No. If the parent doesn't use it, it is better to define the state in child component and if the child component share same state value, you can use useContext to use the state as a global state. This will only rerender component that use useContext when the context value change and to prevent some rerender on some component you can use React.memo or useMemo.

If I should place this state in the parent, and updates it, doesn't that mean that every other section will re-render as well even though only needs this? Does that have impact on performance?

Yes it will rerender everything including the children components of the Parent.