I Built a State Management Library That Works Like React's useState

Gaurav Asawa — Wed, 11 Nov 2026 12:20:52 +0000

I Built a State Management Library That Works Like React's useState — Meet CreateStore

If you've worked with React, you've probably used useState countless times.

It's simple, predictable, and gets the job done.

But as an application grows, things get a little more complicated. You have components deeply nested in the component tree that need access to the same state. Suddenly, you're passing props through multiple components, introducing Context Providers, or bringing in a state management library with its own concepts and boilerplate.

I kept thinking:

Why can't sharing global state be as simple as using useState?

That question led me to build CreateStore, a JavaScript state management library that I've recently published on npm.

In this article, I'll walk through the problem, how CreateStore approaches it, and how you can start using it in a React application.

The problem with sharing state in React

Let's say we're building a simple todo application.

We have two components:

TodoCount – displays the number of todos.
AddTodo – allows users to add new todos.

With regular React state, we might lift the state to a common parent and pass it down through props.

As the application grows, this approach can become difficult to maintain.

React Context is another option, but it introduces providers and additional setup.

Libraries like Redux solve much larger state management requirements, but sometimes you don't need that much ceremony for straightforward shared state.

I wanted something that felt familiar to React developers without introducing another complicated mental model.

Meet CreateStore

CreateStore is a global state management library built around one simple idea:

Write your state once. Access it anywhere. Keep the API familiar.

Here's what makes it interesting:

No Context Providers.
No reducers.
No action types.
No unnecessary configuration for basic global state.
TypeScript support.
Components subscribe to the keys they actually use.

And when your application needs more, CreateStore provides optional capabilities such as computed values, server queries, persistence, offline support, undo/redo, and cross-tab synchronization.

You don't have to enable everything upfront.

1. Install CreateStore

First, install the package:

`npm install @createstore/createstore`

Requirement: React 19 or newer.

2. Create your global store

Create a file called store.ts.

`import { createStore } from '@createstore/createstore';

type Todo = {
  id: number;
  text: string;
  done: boolean;
};

export const { useGlobalState } = createStore({
  todos: [] as Todo[],
  filter: 'all' as 'all' | 'open' | 'done',
});`

That's it.

You've created a global store with two keys: todos and filter.

No reducers, providers, or additional setup required.

3. Read and update state from different components

Now let's create two independent components.

Component 1: TodoCount.tsx

`import { useGlobalState } from './store';

export function TodoCount() {
  const [todos] = useGlobalState('todos');

  return (
    <div>
      <h2>Total Todos: {todos.length}</h2>
    </div>
  );
}`

Component 2: AddTodo.tsx

`import { useGlobalState } from './store';

export function AddTodo() {
  const [todos, setTodos] = useGlobalState('todos');

  const addTodo = () => {
    const newTodo = {
      id: Date.now(),
      text: 'Explore CreateStore',
      done: false,
    };

    setTodos([...todos, newTodo]);
  };

  return (
    <button onClick={addTodo}>
      Add Todo
    </button>
  );
}`

Notice something?

Both components access the same global state using the same familiar hook.

When AddTodo updates the todos, TodoCount automatically receives the updated state.

They don't need to be directly connected through props or wrapped in a Context Provider.

4. What about features beyond global state?

This is where I wanted CreateStore to go beyond just sharing values between components.

Real applications need more than basic state management.

For example, you might need:

Computed values

Derive values from existing state without maintaining duplicate state.

Server data

Fetch data using the store's query capabilities, including parameterized and paginated queries.

Persistence

Keep selected state available even after a page reload.

Cross-tab synchronization

Keep state synchronized across browser tabs.

Offline support

Support offline workflows and queued server updates.

Undo and redo

Track state history and move backwards or forwards when needed.

These capabilities are available through optional store configuration and APIs. You can explore each feature in the documentation.

5. Configure only what you need

Here's an example of enabling some optional features:

`import { createStore } from '@createstore/createstore';

const { useGlobalState } = createStore(
  {
    cart: [] as string[],
    theme: 'light' as 'light' | 'dark',
  },
  {
    name: 'shop',
    persist: true,
    history: true,
    syncTabs: true,
    offline: true,
    devtools: true,
  }
);`

Instead of adding multiple tools for every requirement, CreateStore aims to bring these capabilities under one consistent store API.

You can also start with a basic store and add features as your application grows.

6. Is CreateStore for every React application?

Honestly, no.

If you're managing a simple input value or a component-specific toggle, React's built-in useState is perfectly fine.

CreateStore is more useful when:

Multiple components need access to shared state.
You're tired of passing props through multiple component levels.
You want a familiar API for global state.
You want shared client state and server data capabilities in one library.
You prefer enabling features as your application needs them.

It's another option in the React ecosystem, and I'd love to see how developers use it in real projects.

Why I built it

For me, this project was about more than creating another npm package.

I wanted to take an everyday development problem, explore a possible solution, build something from scratch, write documentation, and make it available for other developers.

There are already excellent state management libraries in the React ecosystem. CreateStore isn't about replacing all of them.

It's about exploring a simpler approach to global state management.

And now that it's published, the most valuable next step is getting real developers to try it.

Give CreateStore a try!

If you're a React developer, I'd genuinely appreciate it if you could check out the project.

📦 npm package:

https://www.npmjs.com/package/@createstore/createstore

📚 Documentation:

https://createstore-docs.pages.dev/

💻 GitHub repository:

https://github.com/Gauravasawa/createstore

I'd love to hear your thoughts:

Does the API feel intuitive?
Would you use this in a real-world project?
What features would you like to see?
Did you find any bugs or unexpected behaviour?

Feel free to open an issue or contribute on GitHub.

I'm looking forward to improving CreateStore with feedback from the developer community.

Built with curiosity, shared with the community. Happy coding! 🚀

If you try it out, please share your experience. Every bit of feedback helps.

ReactJS #JavaScript #TypeScript #WebDevelopment #FrontendDevelopment #OpenSource #NPM #SoftwareEngineering #Programming #Coding #DeveloperCommunity #BuildInPublic #ReactDevelopers #StateManagement #GitHub #TechCommunity #WebDev #FullStackDevelopment #100DaysOfCode #LearnToCode #DevTools #ReactHooks #JavaScriptDeveloper #OpenSourceCommunity #SoftwareDevelopment #NextJS

DEV Community: Gaurav Asawa