{"id":36800638,"url":"https://github.com/yezyilomo/state-pool","last_synced_at":"2026-01-12T13:33:54.241Z","repository":{"id":37025514,"uuid":"239129602","full_name":"yezyilomo/state-pool","owner":"yezyilomo","description":"Transform your React app with our state management library! Declare global and local states like variables, powered by the magic of React hooks 🪄✨","archived":false,"fork":false,"pushed_at":"2025-08-17T09:52:47.000Z","size":2027,"stargazers_count":139,"open_issues_count":15,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-17T14:13:22.607Z","etag":null,"topics":["hooks","react","react-hooks","state","state-management"],"latest_commit_sha":null,"homepage":"https://yezyilomo.github.io/state-pool/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yezyilomo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"patreon":"yezyilomo"}},"created_at":"2020-02-08T12:34:24.000Z","updated_at":"2025-08-26T03:07:58.000Z","dependencies_parsed_at":"2024-02-08T10:02:11.239Z","dependency_job_id":null,"html_url":"https://github.com/yezyilomo/state-pool","commit_stats":{"total_commits":192,"total_committers":4,"mean_commits":48.0,"dds":0.02604166666666663,"last_synced_commit":"63c654654d96596200598b90a0032c53157302ce"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/yezyilomo/state-pool","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezyilomo%2Fstate-pool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezyilomo%2Fstate-pool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezyilomo%2Fstate-pool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezyilomo%2Fstate-pool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yezyilomo","download_url":"https://codeload.github.com/yezyilomo/state-pool/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yezyilomo%2Fstate-pool/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28339201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T12:22:26.515Z","status":"ssl_error","status_checked_at":"2026-01-12T12:22:10.856Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","react","react-hooks","state","state-management"],"created_at":"2026-01-12T13:33:53.656Z","updated_at":"2026-01-12T13:33:54.197Z","avatar_url":"https://github.com/yezyilomo.png","language":"TypeScript","funding_links":["https://patreon.com/yezyilomo"],"categories":[],"sub_categories":[],"readme":"# [State Pool](https://yezyilomo.github.io/state-pool/)\n\n![Build Status](https://github.com/yezyilomo/state-pool/actions/workflows/node.js.yml/badge.svg?branch=master)\n[![Build Size](https://img.shields.io/bundlephobia/minzip/state-pool?label=bundle-size\u0026style=flat)](https://bundlephobia.com/result?p=state-pool)\n[![Version](https://img.shields.io/npm/v/state-pool?style=flat)](https://www.npmjs.com/package/state-pool)\n[![Downloads](https://img.shields.io/npm/dt/state-pool.svg?style=flat)](https://www.npmjs.com/package/state-pool)\n\nTransform your React app with our state management library! Declare global and local states like variables, powered by the magic of React hooks 🪄✨\n\n## Features \u0026 Advantages\n- Simple, familiar, flexible and very minimal core API but powerful\n- Built-in support for state persistence\n- Very easy to learn because its API is very similar to react state hook's API\n- Support selecting deeply nested state\n- Support creating state dynamically\n- Can be used outside react components\n- Doesn't wrap your app in context providers\n- Very organized API, You can do almost everything with a single import\n\nWant to see how this library is making all that possible?\n\nCheck out the full documentation at [yezyilomo.github.io/state-pool](https://yezyilomo.github.io/state-pool/)\n\nYou can also try live examples [Here](https://yezyilomo.github.io/state-pool-examples)\n\u003cbr/\u003e\n\n## How it Works\n1. Create a state\n\n2. Subscribe a component(s) to the state created\n\n3. If a component wants to update the state, it sends update request\n\n4. When a state receives update request, it performs the update and send signal to all components subscribed to it for them to update themselves(re-render)\n\n\u003cbr/\u003e\n\n## Installation\n```sh\nnpm install state-pool\n```\n\nOr \n\n```sh\nyarn add state-pool\n```\n\n\u003cbr/\u003e\n\n## Getting Started\nUsing **state-pool** to manage state is very simple, all you need to do is\n1. Create and initialize a state by using `createState`\n2. Use your state in your component through `useState` hooks\n\nThese two steps summarises pretty much everything you need to use **state-pool**.\n\nBelow are few examples showing how to use **state-pool** to manage states.\n\n```jsx\n// Example 1.\nimport React from 'react';\nimport { createState } from 'state-pool';\n\n\nconst count = createState(0);  // Create \"count\" state and initialize it with 0\n\n\nfunction ClicksCounter(props){\n    // Use \"count\" state\n    const [count, setCount] = count.useState();\n\n    const incrementCount = (e) =\u003e {\n        setCount(count+1)\n    }\n\n    return (\n        \u003cdiv\u003e\n            Count: {count}\n            \u003cbr/\u003e\n            \u003cbutton onClick={incrementCount}\u003eClick\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n\nReactDOM.render(ClicksCounter, document.querySelector(\"#root\"));\n```\n\n\u003cbr/\u003e\n\nThe other way to do it is using `useState` from `state-pool`\n```jsx\n// Example 2.\nimport React from 'react';\nimport { createState, useState } from 'state-pool';\n\n\nconst count = createState(0);  // Create \"count\" state and initialize it with 0\n\n\nfunction ClicksCounter(props){\n    // Use \"count\" state\n    const [count, setCount] = useState(count);\n\n    const incrementCount = (e) =\u003e {\n        setCount(count+1)\n    }\n\n    return (\n        \u003cdiv\u003e\n            Count: {count}\n            \u003cbr/\u003e\n            \u003cbutton onClick={incrementCount}\u003eClick\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n\nReactDOM.render(ClicksCounter, document.querySelector(\"#root\"));\n```\n\n\u003cbr/\u003e\n\n## What about local state?\nWith **state-pool**, state are just like variables, if declared on a global scope, it’s a global state and if declared on local scope it’s a local state, so the difference between global state and local state in **state-pool** lies where you declare them just like variables.\n\nHere is an example for managing local state\n```jsx\n// Example 1.\nimport React from 'react';\nimport { useState } from 'state-pool';\n\n\nfunction ClicksCounter(props){\n    // Here `useState` hook will create \"count\" state and initialize it with 0\n    // Note: the `useState` hook used here is impored from state-pool and not react\n    const [count, setCount] = useState(0);\n\n    const incrementCount = (e) =\u003e {\n        setCount(count+1)\n    }\n\n    return (\n        \u003cdiv\u003e\n            Count: {count}\n            \u003cbr/\u003e\n            \u003cbutton onClick={incrementCount}\u003eClick\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n\nReactDOM.render(ClicksCounter, document.querySelector(\"#root\"));\n```\n\u003cbr/\u003e\n\nIf you don't want **state-pool's** `useState` to collide with **React's** `useState` you can import `StatePool` and use the hook from there,\n\nHere is an example\n```jsx\n// Example 2.\nimport React from 'react';\nimport StatePool from 'state-pool';\n\n\nfunction ClicksCounter(props){\n    // Here `useState` hook will create \"count\" state and initialize it with 0\n    const [count, setCount] = StatePool.useState(0);\n\n    const incrementCount = (e) =\u003e {\n        setCount(count+1)\n    }\n\n    return (\n        \u003cdiv\u003e\n            Count: {count}\n            \u003cbr/\u003e\n            \u003cbutton onClick={incrementCount}\u003eClick\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n\nReactDOM.render(ClicksCounter, document.querySelector(\"#root\"));\n```\n\n\u003cbr/\u003e\n\n## Isn't `StatePool.useState` the same thing as `React.useState`?\n**Definitely. not!...**\n\nBoth can be used to manage local state, and that's where the similarity ends. `StatePool.useState` offers more features, for one it offers a simple way to update nested data unlike `React.useState`, it's also flexible as it's used to manage both global state and local state. So you could say `React.useState` is a subset of `StatePool.useState`.\n\nHere is an example of `StatePool.useState` in action, updating nested data\n```jsx\n// Example 2.\nimport React from 'react';\nimport StatePool from 'state-pool';\n\n\nconst user = StatePool.createState({name: \"Yezy\", age: 25});\n\nfunction UserInfo(props){\n    const [user, setUser, updateUser] = StatePool.useState(user);\n\n    const updateName = (e) =\u003e {\n        updateUser(user =\u003e {\n            user.name = e.target.value;\n        });\n    }\n\n    return (\n        \u003cdiv\u003e\n            Name: {user.name}\n            \u003cbr/\u003e\n            \u003cinput type=\"text\" value={user.name} onChange={updateName}/\u003e\n        \u003c/div\u003e\n    );\n}\n\nReactDOM.render(UserInfo, document.querySelector(\"#root\"));\n```\n\nWith `React.useState` you would need to recreate `user` object when updating `user.name`, but with `StatePool.useState` you don't need that, you just update the value right away. \n\nThat's one advantage of using `StatePool.useState` but there are many more, you'll learn when going through [**documentation**📝](https://yezyilomo.github.io/state-pool/).\n\n\n\n## Store based example\nIf you have many states and you would like to organize them into a store, **state-pool** allows you to do that too and provides a ton of features on top of it.\n\nHere are steps for managing state with a store\n1. Create a store(which is basically a container for your state)\n1. Create and initialize a state by using `store.setState`\n2. Use your state in your component through `store.useState` hooks\n\nThese three steps summarises pretty much everything you need to manage state with a store.\n\nBelow are few examples of store in action\n\n```jsx\n// Example 1.\nimport { createStore } from 'state-pool';\n\n\nconst store = createStore();  // Create store for storing our state\nstore.setState(\"count\", 0);  // Create \"count\" state and add it to the store\n\nfunction ClicksCounter(props){\n    // Use \"count\" state\n    const [count, setCount] = store.useState(\"count\");\n\n    return (\n        \u003cdiv\u003e\n            Count: {count}\n            \u003cbr/\u003e\n            \u003cbutton onClick={e =\u003e setCount(++count)}\u003eClick\u003c/button\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n\u003cbr/\u003e\n\n```jsx\n// Example 2.\nimport { createStore } from 'state-pool';\n\n\n// Instead of using createStore and store.setState,\n// you can combine store creation and initialization as follows\n\nconst store = createStore({\"user\", {name: \"Yezy\", age: 25}});  // create store and initialize it with user\n\nfunction UserInfo(props){\n    const [user, setUser, updateUser] = store.useState(\"user\");\n\n    const updateName = (e) =\u003e {\n        updateUser(user =\u003e {\n            user.name = e.target.value;\n        });\n    }\n\n    return (\n        \u003cdiv\u003e\n            Name: {user.name}\n            \u003cbr/\u003e\n            \u003cinput type=\"text\" value={user.name} onChange={updateName}/\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n\u003cbr/\u003e\n\n**State-pool** doesn't enforce storing your states in a store, If you don't like using the architecture of store you can still use **state-pool** without it. In **state-pool**, store is just a container for states, so you can still use your states without it, in fact **state-pool** doesn’t care where you store your states as long as you can access them you're good to go.\n\n\u003cbr/\u003e\n\nPretty cool, right?\n\n\n## [Documentation 📝](https://yezyilomo.github.io/state-pool/)\nFull documentation for this project is available at [yezyilomo.github.io/state-pool](https://yezyilomo.github.io/state-pool/), you are advised to read it inorder to utilize this library to the fullest. You can also try live examples [here](https://yezyilomo.github.io/state-pool-examples).\n\n\n## Running Tests\nIf you've forked this library and you want to run tests use the following command\n\n```sh\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyezyilomo%2Fstate-pool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyezyilomo%2Fstate-pool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyezyilomo%2Fstate-pool/lists"}