{"id":16749744,"url":"https://github.com/myckhel/use-react-state","last_synced_at":"2025-03-16T04:19:37.908Z","repository":{"id":57388302,"uuid":"374150299","full_name":"myckhel/use-react-state","owner":"myckhel","description":"react useState is now more intelligent","archived":false,"fork":false,"pushed_at":"2023-10-03T08:58:01.000Z","size":1523,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T17:04:20.176Z","etag":null,"topics":["functional-components","react","react-state","react-use-state","reactjs","use-state"],"latest_commit_sha":null,"homepage":"https://github.com/myckhel/use-react-state#use-react-state","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/myckhel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-06-05T15:35:59.000Z","updated_at":"2023-10-03T08:58:05.000Z","dependencies_parsed_at":"2024-10-23T00:38:26.268Z","dependency_job_id":null,"html_url":"https://github.com/myckhel/use-react-state","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myckhel%2Fuse-react-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myckhel%2Fuse-react-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myckhel%2Fuse-react-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myckhel%2Fuse-react-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/myckhel","download_url":"https://codeload.github.com/myckhel/use-react-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243823043,"owners_count":20353595,"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":["functional-components","react","react-state","react-use-state","reactjs","use-state"],"created_at":"2024-10-13T02:25:53.744Z","updated_at":"2025-03-16T04:19:37.887Z","avatar_url":"https://github.com/myckhel.png","language":"JavaScript","readme":"# use-react-state\n\n\u003e managing state in react is now more intelligent.\n\n[![NPM](https://img.shields.io/npm/v/use-react-state.svg)](https://www.npmjs.com/package/use-react-state) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Overview\n\n`use-react-state` is an advanced implementation of [React's useState](https://reactjs.org/docs/react-component.html#setstate)\nIt gives almost the same and more functionality as [React's useState](https://reactjs.org/docs/react-component.html#setstate).\n\n### Using Reacts useState\n😢😭😿\n```jsx\nimport { useState } from 'react'\n\nfunction Component(){\n  const [first, setFirst] = useState(1)\n  const [second, setSecond] = useState(2)\n  const [third, setThird] = useState(3)\n  const [fourth, setFourth] = useState(4)\n\n  const changeFirstAndSecond = () =\u003e {\n    setFirst(10)\n    setSecond(20)\n    // 2x re-render\n  }\n\n  const resetState = () =\u003e {\n    setFirst(1)\n    setSecond(2)\n    setThird(3)\n    setFourth(4)\n    // 4x re-render\n  }\n}\n```\n\n## Using `use-react-state` as useState replacement.\n😊😃😺😄\n```jsx\nimport useState from 'use-react-state'\n\nfunction Component(){\n  const [state, setState] = useState({\n    first: 1,\n    second: 2,\n    third: 3,\n    fourth: 4,\n  })\n\n  const changeFirstAndSecond = () =\u003e {\n    setState({\n      first: 10,\n      second: 20,\n    })\n    // 1x re-render\n  }\n\n  const resetState = () =\u003e {\n    setState({\n      first: 1,\n      second: 2,\n      third: 3,\n      fourth: 4,\n    })\n    // 1x re-render\n  }\n}\n```\n\n## Install\n\n```bash\nyarn add use-react-state\n```\n\n## Usage\n\n```js\nimport React from 'react'\n\nimport useState from 'use-react-state'\n\nconst App = () =\u003e {\n  const [state, setState] = useState({ nine: 9 })\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eNine: is {state.nine}\u003c/p\u003e\n\n      \u003cbutton onClick={() =\u003e setState(({ nine }) =\u003e ({ nine: nine + 1 }))}\u003e\n        Increaae state.nine by 1\n      \u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## APIs\n\n### useState\n\n\u003e is a Hook that lets you add React state to function components.\n\n#### @params\n\n- | name                | description           | type  |\n  | ------------------- | --------------------- | ----- |\n  | **`initialState?`** | state's initial state | `any` |\n\n#### @return\n\n- type `array`\n- - `state` | current state value | `any`\n- - [setState](#setState) | function to update the state | `function`\n- - `stateRef` | state reference | `object`\n\n```js\nimport useState from 'use-react-state'\nconst [state, setState, stateRef] = useState(initialState)\n```\n\n### setState\n\n\u003e function to update the state.\n\u003e setState is an intelligent setter function which guesses how you intends to update an existing state.\n\u003e When array is passed as the new state, it assumes you will append the newState array with the current state if current state is an array else it replaces the state. same goes for objects.\n\n#### @params\n\n- | name                     | description                         | type  |\n  | ------------------------ | ----------------------------------- | ----- |\n  | **`newState\\|callback`** | new state to set or setter callback | `any` |\n\n#### using setState\n\nGiven the 1st example below, setState will merge new state object with existing state given that existing state is an object.\n\n```js\nimport useState from 'use-react-state'\n\nconst [state, setState, stateRef] = useState({ foo: 'foo' })\n\n// merge state object\nsetState({ bar: 'bar' }) // {foo: 'foo', bar: 'bar'}\n\n// replace state\nsetState('foo') // 'foo'\n\n// replace state\nsetState(['foo']) // ['foo']\n\n// push state array\nsetState(['bar']) // ['foo', 'bar']\n\n// custom state setter\nsetState((existingDraftState) =\u003e {\n\n  return ['baz']\n\n}) // ['baz']\n```\n\n#### using setState's [immer produce feature](https://immerjs.github.io/immer/produce)\n\nsetState uses immer's produce feature for state mutation.\nYour are not limited to using the functionality as well.\n\n```js\nimport useState from 'use-react-state'\n\nconst [state, setState] = useState({ foo: 'foo' })\n\n// custom state setter with immer feature\nsetState((existingDraftState) =\u003e {\n\n  existingDraftState.bar = 'bar'\n\n}) // {foo: 'foo', bar: 'bar'}\n```\n\n## License\n\nMIT © [myckhel](https://github.com/myckhel)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyckhel%2Fuse-react-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmyckhel%2Fuse-react-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyckhel%2Fuse-react-state/lists"}