Best way to manage state on multiple pages?

[dapper wagon]

I'm seeking advice on managing state in my app, which has numerous state adjustments on each page (similar to Notion). I'm struggling with structuring my server and client pages and components effectively. Specifically, I'm trying to determine the best method for managing state for a page with multiple components.

Here are my main concerns:
1 - Do I need a parent client layer to manage state across multiple components on a page or is there a better way involving layouts?
2 - If I use a parent client layer to layout the components, does that render layouts file in that route useless pretty much as the page will be managing the layout?

An image is attached to show my setup any suggestions or best practices for handling this would be greatly appreciated!

[reef quiver]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[unborn lynx]

You can use React Context or state management library like: jotai, zustand, redux, etc.

Also upon reading your post again, you might have the wrong architecture for this from the start. Try to keep the state inside the component it is used in, and then only bring it up to a "controller" parent component if you need to share the same state across multiple components.