Atomic State Management: Why Nucleux Stands Out from Jotai and Zustand

Posted on by — No Comments ↓

State management in React has evolved dramatically. Gone are the days when Redux was your only choice for complex applications. Today’s atomic state management libraries offer fine-grained reactivity, minimal boilerplate, and better performance. But which one should you choose?

The Rise of Atomic State Management

Traditional state management forces entire components to re-render when any part of the state changes. Atomic state management flips this approach – only components subscribed to specific pieces of state update when those pieces change.

This granular approach offers several key benefits:

  • Performance: Eliminates unnecessary re-renders
  • Simplicity: No complex provider trees or reducer boilerplate
  • Scalability: Independent state atoms that don’t interfere with each other
  • Developer Experience: Intuitive APIs that feel natural to use

Popular Solutions: Jotai and Zustand

Jotai: Bottom-Up Atomic Approach

import { atom, useAtom } from 'jotai'

const countAtom = atom(0)
const nameAtom = atom('John')

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

Pros: True atomic approach, excellent for complex data relationships
Cons: Requires wrapping your app in a Provider, atoms scattered across files

Zustand: Simple Global Store

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, increment } = useStore()
  return <button onClick={increment}>{count}</button>
}

Pros: No providers needed, simple API, great for global state
Cons: Not truly atomic – all subscribers update when any state changes

Enter Nucleux: The Best of Both Worlds

Nucleux combines the atomic precision of Jotai with the simplicity of Zustand, while adding some unique advantages: 

import { Store, useNucleux } from 'nucleux'

class CounterStore extends Store {
  count = this.atom(0)
  name = this.atom('John')

  increment() {
    this.count.value += 1
  }
}

function Counter() {
  const { count, increment } = useNucleux(CounterStore)
  return <button onClick={increment}>{count}</button>
}

Why Nucleux Wins

1. True Atomic Updates, Zero Providers

Unlike Jotai, Nucleux requires no providers. Unlike Zustand, it offers genuine atomic updates – only components using count re-render when count changes, not components using name.

2. Organized State Architecture

Instead of scattered atoms or monolithic stores, Nucleux uses classes to group related state and methods logically: 

class TodoStore extends Store {
  todos = this.atom([])
  filter = this.atom('all')

  // Derived state that auto-updates
  filteredTodos = this.deriveAtom(
    [this.todos, this.filter],
    (todos, filter) => todos.filter(/* filter logic */)
  )

  addTodo(text) {
    this.todos.value = [...this.todos.value, { id: Date.now(), text }]
  }
}

3. Built-in Dependency Injection

Need one store to react to another? Nucleux makes it effortless: 

class NotificationStore extends Store {
  userStore = this.inject(UserStore)
  notifications = this.atom([])

  constructor() {
    super()
    // Auto-load notifications when user changes
    this.watchAtom(this.userStore.currentUser, (user) => {
      if (user) this.loadNotifications(user.id)
    })
  }
}

4. Automatic Persistence

Save state to localStorage or AsyncStorage with zero boilerplate: 

class UserStore extends Store {
  // Automatically persists to localStorage
  preferences = this.atom({ theme: 'dark' }, 'user-prefs')
}

5. Three Ways to Access State

Choose the right tool for each component: 

// Just the methods
const store = useStore(TodoStore)

// Single atom value
const todos = useValue(TodoStore, 'todos')

// Everything at once
const { todos, filter, addTodo } = useNucleux(TodoStore)

Performance Comparison

Feature Jotai Zustand Nucleux
Atomic Updates ✅ ❌ ✅
No Providers ❌ ✅ ✅
Organized Architecture ❌ ⚠️ ✅
Built-in Persistence ❌ ❌ ✅
Dependency Injection ❌ ❌ ✅

The Bottom Line

While Jotai and Zustand are excellent libraries, Nucleux offers the complete package:

  • Atomic precision without provider complexity
  • Organized architecture that scales with your team
  • Built-in features that eliminate common boilerplate

Ready to simplify your React state management? Give Nucleux a try in your next project.

Want to see Nucleux in action? Check out the live demo or visit nucleux.dev for complete documentation.

Leave a Reply