Best practices for state management at the page level?

[vaynevayne]

We divide state into three categories, application level, page level, component level, Zustand corresponds to the application level, this part of the state is very small, useState corresponds to the component level, this part is a lot, and the page level state, this is really need to pay attention to, imagine, a button in the upper right corner, control an input box in the lower left corner, so that the current component level state, Almost impossible to do, and this is obviously not application-level state, However, if we have component-level state management, it can be easily implemented. I think we really need to think about state management, page-level state mainly serves user operations, Most of them add or delete the global state by clicking on the event, there is a chronological issue in it, so it is very certain whether the attribute is there or not, which is much like jquery accessing dom, which is valid on the current docunent.so we need a page-level state management scheme, which is more in line with the business intuition, can open the business imagination, want to ask what is a good best practice? For example, listening to a react-router, resetting the state when the page leaves, initializing the state when it enters, or using useEffect inside the main component to do this, or Main wrapping the provider, are there any good best practices?