React State Custom simplifies state management by harnessing the power of React hooks and event-driven subscriptions. It offers an effortless setup with no boilerplate, ensuring that managing global state in React applications is both efficient and intuitive.
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.
useState, useEffect) for a clean state management experience without additional complexity.<AutoRootCtx /> for effortless context lifecycle management, automatically creating and destroying contexts as needed.To get started with React State Custom, follow these steps:
createRootCtx.createAutoCtx to manage lifecycles automatically through <AutoRootCtx />.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>
);
}
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.
No comments yet.
Sign in to be the first to comment.