How to properly work with components in React?

Question

JavaScript

Good day to all! I have a question, perhaps a theoretical one.

I wanted to learn how to correctly form components in React and what exactly of them (useState, useEffect, functions, etc.) should be transferred to the App component. Before that, I did mostly small, educational projects where a maximum of 3 pages. There I moved all the useState , functions and effects to the main App component. And now I'm busy with a project with a lot of pages and information, and moving all the states, functions and effects to the App seems redundant.

Please tell me how it is right and what to transfer to the App component from all the others, and what to leave in these components. What kind of useState, useEffcet and functions are best done in the main parent component, and what can be left in its native component.
Thanks in advance for your reply and tips!

Answer 1

moved all useState , functions and effects to the main App component

This is not taught.