Nucleux

Question

The Story Behind Nucleux

Nucleux emerged from a simple frustration: existing React state management solutions either require complex provider setups (like Context API) or cause unnecessary re-renders (like most global state libraries). After trying Redux, Zustand, Jotai, and building custom solutions, I realized developers needed something that combined atomic precision with organizational clarity.

How It Works

Nucleux uses atomic state management where each piece of state is independent. When you update an atom, only components subscribed to that specific atom re-render - no cascade effects, no provider hell.

class TodoStore extends Store {
  todos = this.atom([])
  filter = this.atom('all')
  
  addTodo(text) {
    this.todos.value = [...this.todos.value, { id: Date.now(), text }]
  }
}

function TodoApp() {
  const todoStore = useStore(TodoStore)
  const todos = useValue(todoStore.todos)
  
  return (
    <div>
      <button onClick={() => todoStore.addTodo('New task')}>
        Add Todo
      </button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  )
}

Key Features

• Zero Providers: Use state anywhere without wrapping components
• Atomic Updates: Only subscribed components re-render
• Organized Architecture: Class-based stores group related state and methods
• Built-in Persistence: Save to localStorage/AsyncStorage automatically
• Dependency Injection: Stores can easily depend on other stores
• Lightweight: Only 3.5KB gzipped
• SSR Compatible: Works seamlessly with Next.js and server-side rendering

Three Powerful Hooks

1. useStore(StoreClass) - Access store methods

const todoStore = useStore(TodoStore)
todoStore.addTodo('New task')

1. useValue(atom | StoreClass, 'atomKey') - Subscribe to specific atoms

const todos = useValue(todoStore.todos)
// or
const todos = useValue(TodoStore, 'todos')

1. useNucleux(StoreClass) - Get everything at once

const { todos, filter, addTodo } = useNucleux(TodoStore)

Get Involved

• Try it: npm install nucleux or check the live demo
• Contribute: Visit GitHub for issues and feature requests
• Documentation: Full guides at nucleux.dev

We're looking for contributors who understand React performance, state management patterns, and developer experience. Whether it's bug fixes, new features, or documentation improvements - all contributions are welcome!

Comments

Really cool approach to solving the common pain points in React state management — love how Nucleux avoids provider nesting and unnecessary re-renders! Curious though, how does Nucleux handle deeply nested components or cross-store communication at scale?

---

Thanks Andrew! Great questions about scalability.

For deeply nested components, Nucleux shines because there's no provider hierarchy to manage - you can access any store from any component at any depth using the same hooks. No need to thread context through multiple levels.

For cross-store communication, we have built-in dependency injection:

class NotificationStore extends Store {
  userStore = this.inject(UserStore)
  notifications = this.atom([])
  
  constructor() {
    super()
    // Auto-react to user changes
    this.watchAtom(this.userStore.currentUser, (user) => {
      if (user) this.loadNotifications(user.id)
    })
  }
}

The IoC container handles the relationships automatically, so stores can depend on each other without circular dependency issues. Stores are lazily instantiated and cached as singletons, so you get predictable initialization order and memory efficiency even with complex dependency graphs.

We've tested this pattern in production apps with 20+ stores and it scales really well.

Would love to hear your thoughts if you give it a try!