NanoStores: A Minimalist State Manager for Modern Frameworks

Introduction

NanoStores is a minimalist state management solution designed to cater to modern frontend frameworks like React, Vue, Svelte, and more. With its focus on simplicity and efficiency, it offers a refreshing alternative to more complex tools like Redux.

Why Choose NanoStores?

NanoStores distinguishes itself by providing a minimal footprint. Its core package size ranges from 294 to 831 bytes when minified and compressed, depending on the imported components, and it operates with zero dependencies. This makes it an attractive option for projects where keeping the client-side JavaScript lean is crucial.

The Core Concept

At the heart of NanoStores is the concept of atomic stores. Instead of relying on a centralized state management system, you create small, focused stores for individual application concerns. This approach encourages developers to:

• Create one store per concern
• Update it directly using set() or setKey()
• Derive new values using computed()
• Subscribe using framework-specific helpers

This methodology aligns with the "small pieces loosely joined" philosophy, making it a natural fit for many developers.

Key Features

Tiny and Tree-Shakable

NanoStores is designed to be tree-shakable, ensuring that only the stores actually used in a component are included in the bundle. This is particularly beneficial for multi-page apps and component-heavy frontends.

Broad Framework Support

NanoStores supports a wide array of frameworks beyond React, including:

• Vue
• Svelte
• Solid
• Lit
• Angular
• Alpine.js
• Vanilla JavaScript
• SSR workflows

This cross-framework compatibility makes it a versatile tool for various development environments.

Direct State Updates

Unlike Redux, NanoStores does not require reducers or action objects for state changes. Developers can write updates in a more straightforward manner:

import { atom, computed } from 'nanostores';

export const $users = atom([]);

export const $admins = computed($users, users => users.filter(user => user.isAdmin));

export function addUser(user) {
  $users.set([...$users.get(), user]);
}

This approach allows developers to define, derive, and mutate state without unnecessary complexity.

Lazy Lifecycle Hooks

NanoStores includes support for onMount(), allowing stores to initiate work only when actively listened to and to clean up when no longer in use. This is ideal for:

• Timers
• Subscriptions
• URL listeners
• Data loading
• Browser-only side effects

Practical Use in React

For React users, NanoStores offers an integration via @nanostores/react and a useStore() hook:

import { atom } from 'nanostores';
import { useStore } from '@nanostores/react';

const $count = atom(0);

function increment() {
  $count.set($count.get() + 1);
}

export function Counter() {
  const count = useStore($count);

  return <button onClick={increment}>Count: {count}</button>;
}

Advantages Over Redux

While Redux offers a structured model with robust conventions, NanoStores excels in environments where:

• Global event architecture is unnecessary
• State sharing across components is needed without heavy tooling
• Bundle size is a concern
• Cross-framework work is a priority
• Direct mutations are preferred over reducers

Considerations and Limitations

ESM-Only

NanoStores is an ESM-only package. Ensure compatibility if your environment relies on CommonJS or specific framework tooling.

Minimalism and Guardrails

The minimalistic nature of NanoStores grants freedom, which can be beneficial for speed but requires discipline in:

• Store boundaries
• Naming conventions
• Managing side effects
• Testing rigor

Suitability for Your Project

While NanoStores offers a lean alternative, it's essential to evaluate if it aligns with your project's needs, especially if advanced features like time-travel debugging or middleware are priorities.

Conclusion

NanoStores has garnered attention for its ability to deliver a lightweight and framework-friendly state management solution. Its design philosophy of doing less intentionally makes it an appealing choice for many developers seeking a simpler alternative to traditional state management tools.