State Management for users.js

Powerful state management patterns specifically designed for users.js applications. Learn reactive patterns and best practices to build scalable applications.

Explore Concepts Try in Playground

let user = observe({ name: "Jane" });\n\nobserve(() => {\n if (user.name) {\n render(`Welcome, ${user.name}!`);\n }\n});

Core Concepts

Reactive State

Users.js offers built-in reactivity primitives for managing state across components. Changes to observed variables automatically update the UI without needing a framework.

const count = observe(0);\n\nobserve(() => {\n  if (count.value > 0) {\n    render(`You've clicked ${count.value} times!`);\n  }\n});

Tip: Use observe() for all mutable state that needs to trigger updates.

Component State

Encapsulate state within components with local variables. State is automatically cleaned up when the component is unmounted.

const useCounter = () => {\n  let count = 0;\n\n  return {\n    increment: () => count++,\n    get value() { return count; }\n  };\n};

Local state is scoped to components, ensuring clean separation of concerns.

Usage Patterns

Basic State Handling

Create simple state variables and update UI when values change

const count = observe(0);\n\nusersjs(() => {\n  div({ class: 'p-4' }, () => {\n    text(`Count: ${count.value}`);\n    button('Increment', { \n      onClick: () => count.value++\n    });\n  });\n});

State updates automatically trigger UI refreshes

Shared State Between Components

Use state objects to manage shared application state

const appState = observable({\n  user: null,\n  isAuthenticated: false\n});\n\nusersjs(() => {\n  if (appState.value.isAuthenticated) {\n    render(LoggedUserScreen);\n  } else {\n    render(LoginScreen);\n  }\n});

State changes propagate automatically to all components using it

Advanced Patterns

State Composition

Combine simple state units into complex application state structures.

const user = compose(\n  observable({ firstName: 'Jane' }),\n  observable({ lastName: 'Doe' })\n);\n\nconst name = computed(() => {\n  return `${user.firstName} ${user.lastName}`;\n});

Tip: Composed state maintains atomic updates for maximum performance

Persistent State

Store application state in browser storage with built-in tools

const theme = storage('app-theme', 'dark');\n\nusersjs(() => {\n  div({ class: `p-4 bg-${theme.value}` }, () => {\n    renderTheme();\n  });\n});

State persists across sessions with automatic serialization

Getting Started

Create State

Define reactive variables that will automatically update the UI

const count = observe(0);

Track Changes

Create observers that will re-run when observed state changes

observe(() => {\n  div(() => `Value: ${count.value}`);\n});

Update State

Modify state values to trigger automatic UI updates

count.value = 42;

Community Resources

Access the wealth of resources created by our community to accelerate your development.

Core Documentation

Complete guide to the users.js state API with usage examples and migration guides.

Read Docs

Interactive Tuts

Practical guides with hands-on examples for all levels from beginners to advanced developers.

Start Tuts

Best Practices Guide

Learn how to structure large applications, use testing frameworks, and implement responsive designs.

Read Guide