Hello HN,

I built react-state-custom because I found myself constantly choosing between two evils in React: "Provider Hell" (Context API) or "Immortal State" (Zustand/Redux, where state stays in memory forever unless manually reset).

I wanted a middle ground: The simplicity of a Custom Hook, but lifted to a global scope, with built-in garbage collection.

The core idea: You write a standard React hook, and the library wraps it into a global store that mounts/unmounts automatically based on usage.

How it works (The new API): ```typescript

import { useState } from 'react';

import { createStore } from 'react-state-custom';

// 1. Write a normal hook

const useCounterLogic = (initial = 0) => { const [count, setCount] = useState(initial); return { count, inc: () => setCount(c => c + 1) }; };

// 2. Turn it into a Global Store

// The '5000' is a grace period (ms) for auto-cleanup

export const { useStore: useGlobalCounter } = createStore('counter', useCounterLogic, { timeout: 5000 });

// 3. Use it anywhere (No Providers needed)

function Button() { const { count, inc } = useGlobalCounter(10); return <button onClick={inc}>{count}</button>; }

```

Key Features: * Lifecycle Management: Stores auto-unmount when no components are using them (after a configurable grace period). Great for caching UI state without memory leaks. * True Composability: Since stores are just hooks, you can call one store inside another to create reactive dependency graphs naturally. * Parameterized: You can pass props to your global store (useStore({ id: 1 })) to create distinct instances on the fly.

Repo: https://github.com/vothanhdat/react-state-custom Demo: https://vothanhdat.github.io/react-state-custom/

I'd love to hear your feedback on this approach!