{"id":13499631,"url":"https://github.com/tvler/compose-state","last_synced_at":"2025-04-13T08:53:54.438Z","repository":{"id":32086397,"uuid":"131538263","full_name":"tvler/compose-state","owner":"tvler","description":"Compose multiple setState or getDerivedStateFromProps updaters in React","archived":false,"fork":false,"pushed_at":"2023-01-06T01:50:55.000Z","size":1375,"stargazers_count":117,"open_issues_count":13,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T00:33:50.519Z","etag":null,"topics":["functional-programming","javascript","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/tvler.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}},"created_at":"2018-04-29T23:29:48.000Z","updated_at":"2024-12-26T05:00:08.000Z","dependencies_parsed_at":"2023-01-14T20:30:39.406Z","dependency_job_id":null,"html_url":"https://github.com/tvler/compose-state","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvler%2Fcompose-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvler%2Fcompose-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvler%2Fcompose-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvler%2Fcompose-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tvler","download_url":"https://codeload.github.com/tvler/compose-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688543,"owners_count":21145763,"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-programming","javascript","react"],"created_at":"2024-07-31T22:00:36.984Z","updated_at":"2025-04-13T08:53:54.419Z","avatar_url":"https://github.com/tvler.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# ✍️ compose-state\n\n`compose-state` is a library that composes multiple state updaters in React.\n\n\u003cimg width=\"488\" src=\"https://user-images.githubusercontent.com/4934193/39415633-8ed13b02-4bfa-11e8-9e0e-b706ae68fdbc.png\" alt=\"example\" /\u003e\n\n`compose-state` works with the standard `setState` parameters – objects or functions – so you don’t have to learn any new syntax. It’s also compatible with React’s new [`getDerivedStateFromProps`](https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops) lifecycle method.\n\n## Use\n\n### Install\n\n`yarn add compose-state` or `npm install compose-state`\n\n### Import\n\n```jsx\nimport composeState from 'compose-state';\n\n// or\n\nimport {\n  composeState,\n  composeDerivedStateFromProps,\n} from 'compose-state';\n```\n\n### API\n\n#### `composeState([updaters])`\n\nReturns an updater that can be used with `setState`. Calling this produces the same result as calling or accessing each given updater from right to left, merging each partial state. If a given updater is a function, its `prevState` value is the previous state merged with the current partial state.\n\n##### Arguments\n\n| Name | Type | Description |\n| - | - | - |\n| `[updaters]` | `(...Updater)` | Functions that can be used with `setState`, or partial state objects |\n\n#### `composeDerivedStateFromProps([updaters])`\n\nReturns an updater that can be set as a component's `getDerivedStateFromProps` static value. Calling this produces the same result as calling or accessing each given updater from right to left, merging each partial state. If a given updater is a function, its `prevState` value is the previous state merged with the current partial state.\n\n##### Arguments\n\n| Name | Type | Description |\n| - | - | - |\n| `[updaters]` | `(...Updater)` | Functions that can be set as a component's `getDerivedStateFromProps` static value, or partial state objects |\n\n## Benefits\n\n### Simplify your updaters and React code\n\nLet's say you want to call `setState` and do two things\n\n1. Increment a score value by 1\n2. Log the current time to an array\n\nBoth of these updaters need to be functional, since they rely on the previous state for their return values.\n\n```jsx\nconst updateScore = s =\u003e ({ score: s.score + 1 });\nconst logTime = s =\u003e ({ log: [...s.log, Date.now()] });\n```\n\nNormally, we would need to call `setState` for both of these functions\n\n```jsx\nclass Game extends Component {\n  onScore = () =\u003e {\n    this.setState(updateScore);\n    this.setState(logTime);\n  };\n  // ...\n}\n```\n\n...or we rewrite the two updaters into one larger function.\n\n```jsx\nconst updateScoreLogTime = s =\u003e ({\n  score: s.score + 1,\n  log: [...s.log, Date.now()],\n});\n```\n\nBut with `compose-state`, we can keep these two updaters independent, _and_ we won't have to bulk up our component code with more `setState` calls.\n\n```jsx\nconst updateScoreLogTime = composeState(updateScore, logTime);\n\nclass Game extends Component {\n  onScore = () =\u003e {\n    this.setState(updateScoreLogTime);\n  };\n  // ...\n}\n```\n\n`compose-state` isn't dependent on React at all, it's just a big reducer function. This allows you to build and compose as many updaters as you want while keeping your actual component code simple and maintainable.\n\n### Easily mix functional and object updaters\n\n`compose-state` accepts both objects and functions, just like `setState`. This allows you to mix static and dynamic updaters without increasing the complexity of any individual parameter.\n\n```jsx\nconst defaultValue = { value: 0 };\nconst incrementOther = s =\u003e ({ other: s.other + 1 });\n\nthis.setState(\n  composeState(defaultValue, incrementOther)\n);\n```\n\n### Compatibility with getDerivedStateFromProps\n\n`compose-state` comes with a `composeDerivedStateFromProps` function to use with React's new [`getDerivedStateFromProps`](https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops) lifecycle method.\n\n```jsx\nconst updater1 = (nextProps, prevState) =\u003e {\n  // ...\n}\nconst updater2 = (nextProps, prevState) =\u003e {\n  // ...\n}\n\nclass App extends Component {\n  static getDerivedStateFromProps = composeDerivedStateFromProps(\n    updater1, updater2\n  )\n  // ...\n}\n```\n\n### It's just normal, [boring](https://twitter.com/jevakallio/status/987062864002342912) React\n\nWhile more formal state managers push developers away from controlling state in React, `compose-state` simply enhances state control methods that are primitive to the platform.\n\n`compose-state` is a lot like [Classnames](https://github.com/JedWatson/classnames). It's a helper function that makes `setState` calls more declarative and easier to construct, just like how Classnames is a helper function that makes `className` values more declarative and easier to construct.\n\n## Further reading\n\n[Functional setState is the future of React](https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b) by [Justice Mba](https://twitter.com/Daajust)\n\n[Best kept React secret: you can declare state changes separately from the component classes.](https://twitter.com/dan_abramov/status/824308413559668744) by [Dan Abramov](https://twitter.com/dan_abramov)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftvler%2Fcompose-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftvler%2Fcompose-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftvler%2Fcompose-state/lists"}