State composition for different pages/roles, dynamic state

[rootical]

Hello, thanks for the great library! I am thinking of ideas/suggestions for organizing state consistency of different parts of it which can appear depending on an application route or roles. I understand valtio allows freedom of choice and a variety of options for this purpose, but still I would like to understand better how this really impacts rendering and what are the other options.

1. First question, AFAIU, the library will serve its best by having one application state (not multiple proxy states divided by, for example, a page functionality + global state). Is this assumption correct?
2. If yes, what options could be for dynamic state composition with the benefits of typescript? Based on a user role or when a user navigates to a particular route? If the state should be one, does it matter based on the condition I would just need to set particular fields in a global state which by default should be stubbed empty?
3. Or maybe I could safely combine multiple proxies at one page by using different snapshots without severe impact on rendering?

I hope I made it clear but let's take a look at an example.

Having an app state:

import { proxy } from 'valtio'

export type AppState = {
  isSidebarExpanded: boolean
}

export const appState: AppState = proxy({
  isSidebarExpanded: false
})

Having an "admin" page state:

export type AdminState = {
  isMenuStructureExpanded: boolean
}
export const adminState: AdminState = proxy({
  isMenuStructureExpanded: true,
})

Later could be combined in the app state:

import { AdminState, adminState }  from './admin'

export type AppState = {
  isSidebarExpanded: boolean
  adminState: AdminState
}

export const appState: AppState = proxy({
  isSidebarExpanded: false,
  adminState: adminState
})

Having this snippet it works both ways:

useSnapshot(adminState)
// or
useSnapshot(appState)

Is there a crucial difference in which exact snapshot to use (shall it always be the "app state")? Does it make sense to create a combination of proxies in one global proxy? Can there be multiple proxies without big impact on rendering?

Maybe any better suggestions or examples you could share? Maybe I am missing something at the API.
Thanks in advance!

[dai-shi]

the library will serve its best by having one application state

I wouldn't say so. Zustand is more for a global store, but Valtio is said to be rather atomic.

Is there a crucial difference in which exact snapshot to use (shall it always be the "app state")?

Technically, it's better to use smaller one ("adminState"), because it's more scoped subscription. Theoretically, it's more efficient, but in terms of React render optimization, it wouldn't be the bottleneck.

[rootical]

Thanks a lot for your quick response! So using atomic states around is the way to go which doesn't require any hardcore state composition which is a great plus for valtio!