React State Custom

React State Custom is a lightweight, TypeScript-first global state management library for React 19 that emphasizes simplicity and performance through the use of React hooks. It offers automatic context lifecycles, selective re-renders, and built-in DevTools, ensuring a seamless integration with existing React applications without the need for complex boilerplate.

Key Features

• Zero Boilerplate: Utilize familiar React hooks (useState, useEffect) for a clean state management experience without additional complexity.
• Selective Re-renders: Components only update when the specific state data they subscribe to changes, enhancing performance and responsiveness.
• Automatic Context Management: Use <AutoRootCtx /> for effortless context lifecycle management, automatically creating and destroying contexts as needed.
• Type Safety: Full TypeScript support, ensuring type inference and safety across your application.
• Small Bundle Size: The library is approximately 10KB gzipped, with no dependencies other than React itself.

Quick Start

To get started with React State Custom, follow these steps:

1. Write a plain hook that encapsulates your state logic.
2. Create a root context using createRootCtx.
3. Leverage createAutoCtx to manage lifecycles automatically through <AutoRootCtx />.
4. Consume the state anywhere in your components using the generated context hooks.

Example Implementation

Here's a brief overview of how to set up a counter state using React State Custom:

const useCounterState = () => {
  const [count, setCount] = useState(0);
  return { count, increment: () => setCount(c => c + 1), decrement: () => setCount(c => c - 1) };
};

const { useCtxState } = createAutoCtx(createRootCtx('counter', useCounterState));

function Counter() {
  const ctx = useCtxState();
  const { count, increment, decrement } = useQuickSubscribe(ctx);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

When to Use React State Custom

• Ideal for applications that desire a hook-based state management solution without a steep learning curve.
• Beneficial when requiring fine-grained reactivity to optimize rendering performance.
• Suitable for developers who prefer minimal boilerplate and intuitive state management integrated with their existing React knowledge.

For those interested in advanced features, the library includes support for debounced subscriptions, parameterized contexts, and powerful developer tools. Explore the full capabilities and real-world examples by visiting the Live Demo.