Global State Sharing

Deprecated: Context API

The Context API (createContext, context) is deprecated. Use state() with key option instead.

Flexium's philosophy is "No Context API boilerplate" and "No Provider hierarchies". Use state() with keys for global state sharing.

Recommended: Use state() with key

Instead of Context API, use state() with a key option to share state globally:

import { state } from 'flexium/core'

// Share theme globally - no Provider needed
const [theme, setTheme] = state<'light' | 'dark'>('light', { key: 'app:theme' })

// In any component - access the same state
function ThemedButton() {
  const [theme, setTheme] = state('light', { key: 'app:theme' })
  
  return (
    <button
      onclick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}
      style={{
        background: theme === 'dark' ? '#333' : '#fff',
        color: theme === 'dark' ? '#fff' : '#333'
      }}
    >
      Current theme: {theme}
    </button>
  )
}

Complete Example: Auth State

import { state } from 'flexium/core'

// Auth state - shared globally
function useAuth() {
  const [user, setUser] = state<User | null>(null, { key: 'app:auth:user' })
  
  const login = async (email: string, password: string) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password })
    })
    const userData = await response.json()
    setUser(userData)
  }
  
  const logout = () => {
    setUser(null)
  }
  
  return { user, login, logout }
}

// Use in any component
function Header() {
  const { user, logout } = useAuth()
  
  return (
    <header>
      {user ? (
        <>
          <span>Welcome, {user.name}</span>
          <button onclick={logout}>Logout</button>
        </>
      ) : (
        <LoginButton />
      )}
    </header>
  )
}

Multiple Global States

import { state } from 'flexium/core'

// Theme state
const [theme, setTheme] = state('light', { key: 'app:theme' })

// Language state
const [lang, setLang] = state('en', { key: 'app:language' })

// User state
const [user, setUser] = state(null, { key: 'app:user' })

// Use in any component
function ProfileCard() {
  const [theme] = state('light', { key: 'app:theme' })
  const [lang] = state('en', { key: 'app:language' })
  const [user] = state(null, { key: 'app:user' })
  
  return (
    <div class={`card-${theme}`}>
      <h2>{lang === 'en' ? 'Profile' : 'Profil'}</h2>
      <p>{user?.name}</p>
    </div>
  )
}

Benefits of state() with key

• ✅ No Provider boilerplate - No wrapper components needed
• ✅ No hierarchy - Access from anywhere, not just child components
• ✅ Simpler mental model - Same API as local state
• ✅ Automatic cleanup - Use state.delete(key) when needed
• ✅ Type-safe - Full TypeScript support

Migration from Context API

If you're using deprecated Context API, migrate to state() with keys:

// ❌ Old way (deprecated)
import { createContext, context } from 'flexium/core'

const ThemeContext = createContext('light')

function App() {
  const [theme, setTheme] = state('dark')
  return (
    <ThemeContext.Provider value={theme}>
      <Child />
    </ThemeContext.Provider>
  )
}

function Child() {
  const theme = context(ThemeContext)
  return <div>{theme}</div>
}

// ✅ New way
import { state } from 'flexium/core'

function App() {
  // Set theme globally - no Provider needed
  const [theme, setTheme] = state('dark', { key: 'app:theme' })
  return <Child />
}

function Child() {
  // Access theme from anywhere
  const [theme] = state('light', { key: 'app:theme' })
  return <div>{theme}</div>
}

Best Practices

1. Use descriptive keys: Use hierarchical keys like 'app:theme' or ['app', 'auth', 'user']
2. Type safety: Use TypeScript for type-safe state
3. Cleanup when needed: Use state.delete(key) to clean up unused global state
4. Avoid overuse: Don't use global state for every piece of data - prefer local state when possible

See Also

• state() - Complete state() documentation with key option
• Best Practices: State Organization - How to organize global state