İnanç Akduvan

Posted on May 25

I created my own React state management library

#react #javascript #redux #zustand

I was tired of boilerplate and providers.

Like many React developers, I’ve gone through almost every popular global state library over the years…

And at some point I asked myself:

"What if I could just share state across components using a hook — no setup, no boilerplate, no ceremony?"

So I built Keact.

Keact is a key-based global state manager for React.

No Providers. No boilerplate. Just useKeact("something").

The core idea is simple:

// In any component

import { useKeact } from '@inancakduvan/keact';

// Initialize once
const [username, setUsername] = useKeact('username', {
  initialValue: 'John Doe'
});

// Read elsewhere globally by key
const [username] = useKeact('username');

// Also set elsewhere globally by key
const [username, setUsername] = useKeact('username');
setUsername('George Brown');
// End

No setup. No config. No mental gymnastics.

It works exactly like useState, but the value is globally shared by key.

Why not just use Zustand or Redux?

Good question.

They’re great tools, and I’ve used them both. But even Zustand — which is relatively minimal — still requires:

Defining a store
Creating functions for state updates
Importing the store everywhere

For tiny apps, MVPs, or side projects, I often just want something stupidly simple.

A shared value that updates everywhere
Without writing a store or a context or importing 3 files

TypeScript support?

// store.ts
import { typeSafeKeact } from "@inancakduvan/keact";

interface KeactStore {
  basket: {
    id: string;
    count: number;
  }
}

export const useKeact = typeSafeKeact<KeactStore>();

// your-component.ts
import { useKeact } from "@/store.ts";

const [basket, setBasket] = useKeact('basket');

setBasket({
  id: "12345",
  count: 3
});
// End

Bonus: selector-style reading

Sometimes you just want to read a nested value:

const [itemCount] = useKeact((state) => state.cart.items.length);

This works! It's read-only, and super convenient for derived values.

How does it work under the hood?

Keact keeps a simple global object (globalStore) in memory:

When you call:

const [value, setValue] = useKeact("key", { initialValue: 123 });

It:

Registers "key" in the store if it doesn't exist.
When you update a key, keact notifies listeners.
React’s useSyncExternalStore takes care of keeping your components fresh.

——-

Try it

GitHub: https://github.com/inancakduvan/keact
Docs & Demo: https://keact.vercel.app
NPM: npm i @inancakduvan/keact

What do you think?

I am not sure if that kind of library is necessary. I am not even sure about the approach. Also aware about potential structural issues in projects. But I just wanted to create a minimal version of a library in my mind. And let it go 🚌 now... I will just see what it is gonna happen. I will test it, iterate it, maybe keep it going maybe give it up. We will see...

DEV Community