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
useStore(StoreClass) - Access store methods
const todoStore = useStore(TodoStore)
todoStore.addTodo('New task')
useValue(atom | StoreClass, 'atomKey') - Subscribe to specific atoms
const todos = useValue(todoStore.todos)
// or
const todos = useValue(TodoStore, 'todos')
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!
