{"id":21262416,"url":"https://github.com/finom/use-change","last_synced_at":"2025-07-11T04:30:34.183Z","repository":{"id":45470470,"uuid":"347207133","full_name":"finom/use-change","owner":"finom","description":"The most minimalistic React state management library on the market with zero dependencies and React.useState-like syntax","archived":false,"fork":false,"pushed_at":"2023-10-19T15:24:22.000Z","size":583,"stargazers_count":91,"open_issues_count":1,"forks_count":2,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-11-17T04:13:16.096Z","etag":null,"topics":["hook","react","typescript"],"latest_commit_sha":null,"homepage":"","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/finom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2021-03-12T21:53:01.000Z","updated_at":"2024-01-09T08:44:05.000Z","dependencies_parsed_at":"2024-04-07T17:00:33.456Z","dependency_job_id":null,"html_url":"https://github.com/finom/use-change","commit_stats":{"total_commits":213,"total_committers":4,"mean_commits":53.25,"dds":0.03755868544600938,"last_synced_commit":"171e14cbab228166f5d83e8a6440a308a7054fb1"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finom%2Fuse-change","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finom%2Fuse-change/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finom%2Fuse-change/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finom%2Fuse-change/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/finom","download_url":"https://codeload.github.com/finom/use-change/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225674906,"owners_count":17506272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["hook","react","typescript"],"created_at":"2024-11-21T04:58:22.813Z","updated_at":"2024-11-21T04:58:23.472Z","avatar_url":"https://github.com/finom.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## use-change\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n[![npm version](https://badge.fury.io/js/use-change.svg)](https://badge.fury.io/js/use-change) [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/) [![Build status](https://github.com/finom/use-change/actions/workflows/main.yml/badge.svg)](https://github.com/finom/use-change/actions)\n\n\u003e The most minimalistic React state management library on the market with [zero dependencies](https://bundlephobia.com/package/use-change) and `React.useState`-like syntax\n\nWith this hook application state is defined as a nested object and the properties of the object are listened with [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). No reducers, actions, observers, middlewares. Just one hook and some secondary API that you can ignore if you don't need it.\n\nComponents that call `useChange` listen to only those properties that they actually need but never update if something else gets changed 🏎️.\n\nSee discussion and criticism [on Reddit](https://www.reddit.com/r/javascript/comments/qqsbo3/usechange_the_most_minimalistic_react_state/) 😅.\n\n## Table of Contents 📋\n\n\u003c!--ts--\u003e\n* [Quick start \u003cg-emoji class=\"g-emoji\" alias=\"coffee\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/2615.png\"\u003e☕\u003c/g-emoji\u003e](#quick-start-)\n* [Quick start using Provider and store as a class instance \u003cg-emoji class=\"g-emoji\" alias=\"bulb\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/1f4a1.png\"\u003e💡\u003c/g-emoji\u003e](#quick-start-using-provider-and-store-as-a-class-instance-)\n* [Designing the store \u003cg-emoji class=\"g-emoji\" alias=\"construction_worker\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/1f477.png\"\u003e👷\u003c/g-emoji\u003e](#designing-the-store-)\n* [Summary \u003cg-emoji class=\"g-emoji\" alias=\"student\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/1f9d1-1f393.png\"\u003e🧑‍🎓\u003c/g-emoji\u003e](#summary-)\n* [API \u003cg-emoji class=\"g-emoji\" alias=\"rocket\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/1f680.png\"\u003e🚀\u003c/g-emoji\u003e](#api-)\n    * [useChange](#usechange)\n    * [Provider](#provider)\n* [Secondary API \u003cg-emoji class=\"g-emoji\" alias=\"muscle\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/1f4aa.png\"\u003e💪\u003c/g-emoji\u003e](#secondary-api-)\n    * [useValue](#usevalue)\n    * [useSet](#useset)\n    * [useGet](#useget)\n    * [useSilent](#usesilent)\n    * [listenChange](#listenchange)\n    * [unlistenChange](#unlistenchange)\n    * [Context](#context)\n* [Persistent store \u003cg-emoji class=\"g-emoji\" alias=\"mountain_snow\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/1f3d4.png\"\u003e🏔️\u003c/g-emoji\u003e](#persistent-store-️)\n* [Contributors \u003cg-emoji class=\"g-emoji\" alias=\"sparkles\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/2728.png\"\u003e✨\u003c/g-emoji\u003e](#contributors-)\n\n\u003c!-- Added by: finom, at: Sun Dec 12 21:08:36 EET 2021 --\u003e\n\n\u003c!--te--\u003e\n\n## Quick start ☕\n\n1. Install the library by `npm i use-change` or `yarn add use-change`.\n2. Define an object of any shape. It's going to be your store.\n3. Add `useChange` to your component.\n\n```js\nimport React, { ReactElement } from 'react'\nimport useChange from 'use-change';\n\nconst store = { count: 0 };\n\nconst MyComponent = (): ReactElement =\u003e {\n  const [count, setCount] = useChange(store, 'count');\n  \n  return (\n    \u003c\u003e\n      \u003cp\u003e{count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eIncrement\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default MyComponent;\n```\n\n`store.count` is updated using `setCount` function from the tuple returned by `useChange` (just like using `React.useState`). It can also be updated just by direct modification of `count` property:\n\n```js\n// ...\n// you can do it from anywhere\nstore.count = 69; // nice\n```\n\nThe example shows how you can use the hook as a local data store for a component but `store` object can be exported and used by other components. This may be an anti-DRY pattern, that's why it's recommended to use `Provider` exported from `use-change`.\n\n## Quick start using Provider and store as a class instance 💡\n\n1. Install the library by `npm i use-change` or `yarn add use-change`.\n2. Define an object of any shape. At this case this is a store class instance instead of an in-line object.\n3. Wrap your components by `Provider` exported by `use-change`.\n4. Add `useChange` to your components.\n\n```js\n// ./store.ts\n// export the store class to use it for type references\nexport class RootStore {\n  public count = 0;\n}\n\nexport default new RootStore(); // init the store instance\n```\n\n```js\n// ./App.tsx\nimport React, { ReactElement } from 'react';\nimport { Provider as UseChangeProvider } from 'use-change';\nimport MyComponent from './MyComponent';\nimport store from './store';\n\nconst App = (): ReactElement =\u003e (\n  \u003cUseChangeProvider value={store}\u003e\n    \u003cMyComponent /\u003e\n  \u003c/UseChangeProvider\u003e\n)\n\nexport default App;\n```\n\n```js\n// ./MyComponent.tsx\nimport React, { ReactElement } from 'react'\nimport useChange from 'use-change';\nimport { RootStore } from './store';\n\nconst MyComponent = (): ReactElement =\u003e {\n  // the first argument is a path to store object\n  // if store is nested the path could look like \n  // (store: RootStore) =\u003e store.foo.bar where \"bar\" is an object containing \"count\"\n  const [count, setCount] = useChange((store: RootStore) =\u003e store, 'count');\n  \n  return (\n    \u003c\u003e\n      \u003cp\u003e{count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eIncrement\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default MyComponent;\n```\n\n## Designing the store 👷\n\nLet's make it a little bit detailed and add a few classess that may be responsible for different aspects of data. Those classes may consist of user info, fetched data, persistent data or anything else that you want to keep at its own place. But for simplicity let's create a few classess that also consist of counts.\n\n```js\n// ./store.ts\nclass StoreBranchA {\n  public aCount = 0;\n}\n\nclass StoreBranchB {\n  public bCount = 0;\n}\n\n// those classes can also be initialised at class constructor\nexport class RootStore {\n  public readonly storeBranchA = new StoreBranchA();\n  public readonly storeBranchB = new StoreBranchB();\n}\n\n// export store selectors or, in other words, paths to the objects\nexport const ROOT = (store: RootStore) =\u003e store;\nexport const PATH_A = ({ storeBranchA }: RootStore) =\u003e storeBranchA;\nexport const PATH_B = ({ storeBranchB }: RootStore) =\u003e storeBranchB;\n\nexport default new RootStore();\n```\n\nAt this example we're also exporting so-called \"store selectors\". The selectors are one-line arrow functions that provide paths to desired store objects. This makes the code look clean without providing things like `({ users }: RootStore) =\u003e users` every time, but instead we define a simple reusable constant. In case of users the constant can be called `USERS` and applied as the first `useChange` argument: `useChange(USERS, 'something')` (get `store.users.something` property). It's not required but recommended in order to make code look much nicer.\n\nAlso take a look at the `ROOT` store selector. It's going to be used to get and modify properties from the store itself like that: `useChange(ROOT, 'count')` to avoid usage of duplicating `(store: RootStore) =\u003e store` function.\n\nDon't worry, that's the only kind of constants that are going to be exported.\n\n```js\n// ./MyComponent.tsx\nimport React, { ReactElement } from 'react'\nimport useChange from 'use-change';\nimport { PATH_A, PATH_B } from './store';\n\nconst MyComponent = (): ReactElement =\u003e {\n  const [countA, setCountA] = useChange(PATH_A, 'countA');\n  const [countB, setCountB] = useChange(PATH_B, 'countB');\n  \n  return (\n    \u003c\u003e\n      \u003cp\u003e{countA}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCountA(countA + 1)}\u003eIncrement count A\u003c/button\u003e\n      \u003cp\u003e{countB}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCountB(countB + 1)}\u003eIncrement count B\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default MyComponent;\n```\n\nAs you can see the component doesn't modify store object implicitly, therefore it's not possible to change it directly (via assignment operator) from components. You can try to do that though to see how component reacts on changes of a listened property.\n \n```js\n// ...\nimport store, { RootStore } from './store';\n\nsetInterval(() =\u003e {\n  store.storeBranchA.countA++;\n}, 1000);\n\nconst MyComponent = (): ReactElement =\u003e {\n// ...\n```\n\n\nThe component is going to be updated every second since it listens to the `store.storeBranchA.countA` property changes.\n\nThe property can also be manipulated manually inside class methods.\n\n```js\nclass RootStore {\n  public count = 0;\n\n  constructor() {\n    setInterval(() =\u003e {\n      this.incrementCount();\n    }, 1000);\n  }\n\n  public readonly incrementCount() {\n    this.count++;\n  }\n}\n```\n\n## Summary 🧑‍🎓\n\nCongrats! You basically passed the tutorial of how to use `use-change` hook! Let's just mention a few last notes:\n\n**The hook supports two overloads**\n1. Explicit store use. At this case you pass the store object to `useChange` hook: `useChange\u003cT\u003e(object: T, key: string)`\n2. Implicit store use where the store object is passed as `Provider` value and the listenable property is located in a nested object from the store `useChange\u003cT\u003e(storeSelector: (store: T) =\u003e object, key: string)`, where `storeSelector` is a path to a store object as a tiny arrow function.\n\n**Store is mutable, state is immutable.** Think of store as of tree with trunk and branches that never change and on the branches there are leaves that can fall and grow any number of times.\n\nComponents and store fields are connected to each other at many-to-many relaton:\n\n![image](./assets/use-change.png)\n\nLet's take a look at a more abstract example. Just to make it simpler to understand, let's define a small interface instead of classes definition.\n\n```js\ninterface RootStore {\n  readonly me: {\n    isAuthenticated: boolean; \n    name: string;\n  }\n  \n  readonly shop: {\n    readonly cart: {\n      items: ShoppingCartItem[];\n    }\n    \n    deliveryAddress: string;\n  }\n}\n```\n\nIf application store is implemented by the interface, then:\n\n- `RootStore['me']`, `RootStore['shop']`, `RootStore['shop']['cart']` should not be changed since they're \"branches of the tree\". These properties are the **store** that can be returned by store selectors.\n- But `RootStore['me']['isAuthenticated']`, `RootStore['me']['name']`, `RootStore['shop']['cart']['items']`, `RootStore['shop']['deliveryAddress']`  can, since they're \"leaves of the tree\" that can be listened by components. These properties are the **state**.\n\nThis means that any listenable property needs to be overridden by a new value, but never mutated.\n\n```js\nconst [cartItems, setCartItems] = useChange(\n  ({ shop }: RootStore) =\u003e shop.cart, // select the \"tree branch\"\n  'items', // use shop.cart.items property\n);\n\n// ...\n\n// create a new array to be used as shop.cart.items value\nsetCartItems([\n  ...cartItems,\n  newItem,\n]);\n\n// or\nstore.shop.cart.items = [\n  ...cartItems,\n  newItem,\n];\n\n// but never mutate the array\n// cartItems.push(newItem); // wrong\n// store.shop.cart.items.push(newItem); // also wrong\n```\n\n\n## API 🚀\n\n### `useChange`\n\n**Explicit store overload.** At this case you provide a store object directly as the first argument. It can be used for cases when you don't want to apply `Provider` and you need a local one-component store. Useful at forms to avoid usage of multiple `React.useState`.\n\nIn other cases it's recommended to use overload with store selector.\n\n`useChange\u003cT, K\u003e(object: T, key: K \u0026 keyof T) =\u003e [value: inferred, setter: (value: inferred) =\u003e inferred]`\n\n```js\ninterface RootStore {\n  foo: { \n    bar: { \n      key: string;\n    } \n  }\n}\n\nconst store: RootStore = { foo: { bar: { key: 'value' } } };\n// ...\nconst [value, setValue] = useChange(store.foo.bar, 'key'); // value is inferred as string\n```\n\n**Implicit store overload.** The recommended way to use `useChange` if it's used as a core data store library of an app you work on.\n\n`useChange\u003cT, K, S\u003e(getStore: (store: T) =\u003e S, key: K \u0026 keyof S): [value: inferred, setter: (value: inferred) =\u003e inferred]`\n\n```js\ninterface RootStore {\n  foo: { \n    bar: { \n      key: string;\n    } \n  }\n}\nconst store: RootStore = { foo: { bar: { key: 'value' } } };\n// ...\nconst [value, setValue] = useChange((store: RootStore) =\u003e store.foo.bar, 'key'); // value is inferred as string\n```\n\n### `Provider`\n\nThe use-change context provider.\n\n```js\nimport React, { ReactElement } from 'react';\nimport { Provider as UseChangeProvider } from 'use-change';\nimport MyComponent from './MyComponent';\n\nconst store = { count: 0 };\n\nconst App = (): ReactElement =\u003e (\n  \u003cUseChangeProvider value={store}\u003e\n    \u003cMyComponent /\u003e\n  \u003c/UseChangeProvider\u003e\n)\n\nexport default App;\n```\n\n## Secondary API 💪\n\nThe library also provides a few helpful hooks and functions that mostly duplicate features of `useChange` but may be useful working on something big.\n\n\n### `useValue`\n\nSupports 100% the same overload as `useChange` does and works the same way but instead of a `[value, setter]` tuple it returns just a `value` (zero-indexed element of the tuple). \n\n```ts\nconst value = useValue((store: RootStore) =\u003e store.foo.bar, 'key');\n\n// 100% equivalent of \nconst [value] = useChange((store: RootStore) =\u003e store.foo.bar, 'key');\n\n// or \nconst value = useChange((store: RootStore) =\u003e store.foo.bar, 'key')[0];\n```\n\n### `useSet`\n\nSupports 100% the same overload as `useChange` does but instead of a `[value, setter]` tuple it returns just a `setter` (element of index 1 of the tuple). The hook **doesn't trigger component re-render** when property value is changed.\n\n```ts\nconst setBarKey = useSet((store: RootStore) =\u003e store.foo.bar, 'key');\n\n// almost the same as the following, but doesn't trigger component re-render\nconst setBarKey = useChange((store: RootStore) =\u003e store.foo.bar, 'key')[1];\n```\n\n### `useGet`\n\nSupports 100% the same overload as `useChange` does but returns a function that returns store property value. The hook is useful when you need to get an actual property value (at `useEffect` or `useCallback`) but you don't want to make component to re-render. The hook **doesn't trigger component re-render** when property value is changed.\n\n```ts\n// a change of the 'key' property never re-renders the component even if field value is changed\nconst getFooBarValue = useGet((store: RootStore) =\u003e store.foo.bar, 'key'); \n\nuseEffect(() =\u003e {\n  const fooBarValue = getFooBarValue(); // returns store.foo.bar['key']\n  console.log(fooBarValue);\n});\n```\n\n\n### `useSilent`\n\nSupports 100% the same overload as `useChange` does but returns `value` and **doesn't trigger component re-render** when property value is changed. This is the \"silent twin\" of `useValue`.\n\n```ts\nconst value = useSilent((store: RootStore) =\u003e store.foo.bar, 'key');\n```\n\nIt's used for cases if you want to get something unchangeable. A good example is store methods: they don't need to get their property descriptor to be modified.\n\n```js\n// ./store.ts\nclass StoreBranch {\n  public count = 0;\n  \n  public readonly incrementCount = () =\u003e {\n    this.count++;\n  }\n}\n\nexport class RootStore {\n  public readonly storeBranch = new StoreBranch();\n}\n\nexport default new RootStore();\n```\n\n```ts\nconst incrementCount = useSilent((store: RootStore) =\u003e store.storeBranch, 'incrementCount');\n// ...\nincrementCount();\n```\n\n### `listenChange`\n\nAllows to listen to object property changes outside of components. The store object argument should be given explicitly since `Provider` doesn't work here anymore. The method returns a function that unsubscribes from a given event.\n\n`listenChange\u003cT, K\u003e(store: T, key: K \u0026 keyof T, listener: (value: inferred, previousValue: inferred) =\u003e void): () =\u003e void`\n\n```ts\nconst store = { count: 0; };\n\nconst unlisten = listenChange(store, 'count', (count) =\u003e console.log('the count is: ', count));\n\nsetInterval(() =\u003e {\n  store.count++;\n}, 1000);\n```\n\n\n\n### `unlistenChange`\n\nRemoves previously attached listener.\n\n`unlistenChange\u003cT, K\u003e(store: T, key: K \u0026 keyof T, listener: (value: inferred) =\u003e void): void`\n\n```ts\nconst store = { count: 0; };\n\nconst handler = (count) =\u003e console.log('the count is: ', count);\n\nlistenChange(store, 'count', handler);\n\n// ... \n\nunlistenChange(store, 'count', handler);\n```\n\n\n### `Context`\n\nReact context used for the store provider. You can use `Context` with `React.useContext` to receive store object without importing it. `Context.Provider` equals to the `Provider` documented above.\n\n```ts\nimport React, { useContext } from 'react';\nimport { Context as UseChangeContext } from 'use-change';\nimport { RootStore } from './store';\n\nconst MyComponent = () =\u003e {\n  const store = useContext\u003cRootStore\u003e(UseChangeContext);\n  // ...\n}\n```\n\n## Persistent store 🏔️\n\nThere is no built-in feature to store data persistently but the elegancy of use-change design makes possible to create such things easily.\n\n```js\n// ./PersistentStore.ts\nimport { listenChange } from 'use-change';\n\n// the function returns localStorage value or default value if localStorage value doesn't exist\nfunction persistentValue\u003cT\u003e(key: keyof PersistentStore, defaultValue: T) {\n  const storageValue = localStorage.getItem(key);\n  return storageValue ? JSON.parse(storageValue) as T : defaultValue;\n}\n\n// define the part of root store that responsible for persistent store\nexport default class PersistentStore {\n  public age = persistentValue\u003cnumber\u003e('age', 18);\n\n  public firstName = persistentValue\u003cstring\u003e('firstName', 'John');\n\n  public lastName = persistentValue\u003cstring\u003e('lastName', 'Doe');\n\n  constructor() {\n    // enumerate over own property names (age, firstName, lastName)\n    // and define property change listener to update localStorage\n    Object.getOwnPropertyNames(this).forEach((key) =\u003e {\n      listenChange(this, key, (value) =\u003e {\n        localStorage.setItem(key, JSON.stringify(value));\n      });\n    });\n  }\n}\n```\n\nUse the class instance as part of your root store.\n\n```js\n// ./store.ts\nimport PersistentStore from './PersistentStore';\n\nexport class RootStore {\n  public readonly persistent = new PersistentStore();\n}\n\nexport default new RootStore();\n```\n\nThen use it as any other custom object.\n\n```js\n// the value will be written into localStorage\nstore.persistent.age = 20;\n```\n\n```js\n// or with a use-change hook\nimport useChange from 'use-change';\n\n// ...\nconst [age, setAge] = useChange(({ persistent }: RootStore) =\u003e persistent, 'age');\n// ...\n// the value will be written into localStorage\nsetAge(20);\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ivteplo\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/37793399?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIvan Teplov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/finom/use-change/commits?author=ivteplo\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/finom/use-change/commits?author=ivteplo\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/finom/use-change/commits?author=ivteplo\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinom%2Fuse-change","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffinom%2Fuse-change","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinom%2Fuse-change/lists"}