Skip to main content

Shared Context Design

Shared context (sharedCtx) allows you to centralize app-wide state that can be accessed across multiple machines and components.

🔧 Creating Shared Context​

Use createCtx() with a unique ID:

const authCtx = retomus.createCtx('auth', {
  state: {
    user: null,
    isLoggedIn: false,
  },
});

You can access and update it from anywhere:

const user = authCtx.useState('user');

🧬 Context Structure​

Each context can include:

  • state: reactive shared state
  • sv: sharedValue instances
  • ref: mutable values (non-reactive)

Example:

const sharedCtx = createCtx('global', {
  state: { theme: 'light' },
  sv: { notifications: useSharedValue([]) },
  ref: { scrollPos: 0 },
});

🤝 Machine Integration​

Machines can declare which shared contexts they depend on:

options: {
  sharedCtxIds: ['auth', 'global'],
}

This makes the shared context available as ctx.sharedCtx.

🧠 Best Practices​

  • Keep sharedCtx small and domain-specific
  • Split sharedCtx by concern (auth, layout, global, etc.)
  • Treat sharedCtx as a public contract — avoid tight coupling

🔗 Related​