MostafaRastegar / react-constore

Ultra-lightweight state management for React 18+ applications

React ConStore

⚡ Ultra-lightweight state management for React 18+ applications (~950B gzipped)

📊 Quick Stats

📦 NPM Package	📏 Bundle Size	⭐ GitHub Stars	📥 Downloads
react-constore	~950B gzipped	⭐ Star us!	📈 NPM Trends

✅ Features

• ✅ TypeScript Ready - Full type safety out of the box
• ✅ React 18+ Compatible - Concurrent features supported
• ✅ Zero Dependencies - No external packages needed
• ✅ Devtools - use Redux-Devtools for debugging
• ✅ SSR Ready - Works with Next.js App Router
• ✅ Tree Shakeable - Only bundle what you use
• ✅ MIT Licensed - Free for commercial use

🔗 Quick Links

• 📖 Documentation: GitHub Repository
• 📦 Install: npm install react-constore
• 📊 Bundle Analysis: Bundle Phobia
• 📈 Download Stats: NPM Package
• 🐛 Issues & Support: GitHub Issues

🚀 Why React ConStore?

// Traditional React state management ❌
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: 'Guest' });
const [todos, setTodos] = useState([]);
// Props drilling nightmare... 😱

// With React ConStore ✅
const store = createStore({
  count: 0,
  user: { name: 'Guest' },
  todos: []
});

// Use anywhere, anytime 🎉
const [count, setCount] = store.useStoreKey('count');

✨ Key Features

Feature	Description	Benefit
🪶 Ultra Lightweight	Less than 1KB gzipped	Faster bundle, better performance
⚛️ React 18/19 Ready	Concurrent features, automatic batching	Future-proof your app
🎯 Smart Re-renders	Deep equality checks	Only render when data actually changes
🔍 Selective Subscriptions	Subscribe to specific keys	Granular control over updates
📝 Full TypeScript	Complete type safety	Catch bugs at compile time
🌐 SSR Compatible	Next.js 13+ App Router	Server-side rendering support

📦 Installation

# npm
npm install react-constore

# yarn
yarn add react-constore

# pnpm
pnpm add react-constore

🎯 Quick Start

'use client'; // for Next.js App Router

import createStore from 'react-constore';

// 1. Create your store
const store = createStore({
  count: 0,
  user: { name: 'Guest', age: 25 },
  todos: [],
  theme: 'light'
});

// 2. Use in components
function Counter() {
  const [count, setCount] = store.useStoreKey('count');
  
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(c => c + 1)}>
        Functional Update
      </button>
    </div>
  );
}

function UserProfile() {
  const [user, setUser] = store.useStoreKey('user');
  
  return (
    <div>
      <h2>{user.name} (Age: {user.age})</h2>
      <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
        Happy Birthday! 🎉
      </button>
    </div>
  );
}

// 3. Components automatically sync!
function App() {
  return (
    <div>
      <Counter />
      <UserProfile />
    </div>
  );
}

📚 Documentation

🚀 Getting Started

• Installation & Quick Start
• Core Concepts

📖 API Reference

• Hooks Guide - useStoreKey(), useStoreKeys(), useStore()
• Store API - getState(), setState(), subscribe()

🔧 Advanced Usage

• DevTools - Debugger mode and built-in middlewares
• Advanced Patterns - Computed values, actions, middleware
• React Integration - React 18+, Next.js, React Native

🔄 Migration & Comparison

• Migration Guide - From Redux, Zustand, React Context API

📚 Best Practices & Help

• Best Practices
• Testing
• Troubleshooting

📊 Bundle Size Comparison

Library	Size (gzipped)	Features
React ConStore	~950B	✅ Hooks ✅ TypeScript ✅ SSR ✅ DevTools ✅ Middleware ✅ Persist
Redux Toolkit	~3KB	✅ DevTools ✅ Middleware ✅ Time Travel ❌ Simple API
Zustand	~600B	✅ Simple ✅ Middleware ❌ Built-in TypeScript
Jotai	~4KB	✅ Atomic ✅ TypeScript ❌ Learning Curve

🆚 When to Use

Use React ConStore when:

• ✅ You want minimal bundle size
• ✅ Simple to medium complexity apps
• ✅ TypeScript-first development
• ✅ React 18+ features are important
• ✅ Devtools for debugging
• ✅ Custom middleware

Consider alternatives when:

• 🤔 Redux Toolkit: Need time-travel debugging, complex middleware
• 🤔 Zustand: Need advanced features (immer, persist, devtools)
• 🤔 Jotai: Bottom-up atomic state management
• 🤔 Context API: Very simple, component-local state

📄 License

MIT © Mostafa Rastegar

---

Made with ❤️ for the React community