{"id":14483733,"url":"https://github.com/wikiwi/reassemble","last_synced_at":"2025-08-30T04:31:54.812Z","repository":{"id":57349011,"uuid":"80132343","full_name":"wikiwi/reassemble","owner":"wikiwi","description":"Fast Library for the Composition of React Higher-Order-Components","archived":true,"fork":false,"pushed_at":"2017-02-23T03:54:22.000Z","size":95,"stargazers_count":65,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-21T11:14:04.596Z","etag":null,"topics":["composition","higher-order-component","react","recompose"],"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/wikiwi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-01-26T16:31:09.000Z","updated_at":"2023-01-28T15:08:25.000Z","dependencies_parsed_at":"2022-08-29T18:21:15.971Z","dependency_job_id":null,"html_url":"https://github.com/wikiwi/reassemble","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/wikiwi/reassemble","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wikiwi%2Freassemble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wikiwi%2Freassemble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wikiwi%2Freassemble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wikiwi%2Freassemble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wikiwi","download_url":"https://codeload.github.com/wikiwi/reassemble/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wikiwi%2Freassemble/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272363715,"owners_count":24921573,"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","status":"online","status_checked_at":"2025-08-27T02:00:09.397Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["composition","higher-order-component","react","recompose"],"created_at":"2024-09-03T00:02:03.735Z","updated_at":"2025-08-30T04:31:54.458Z","avatar_url":"https://github.com/wikiwi.png","language":"TypeScript","readme":"# reassemble\n\n_reassemble_ is a library for the composition of React Higher-Order-Components optimized for performance.\n\n[![NPM Version Widget]][npm version]\n[![Build Status Widget]][build status]\n[![Coverage Widget]][coverage]\n\n## reassemble vs recompose\n\n_reassemble_ is very similar to [_recompose_](https://github.com/acdlite/recompose). Conceptually both projects differ in such way that _recompose_ uses HOCs as their building blocks, whereas _reassemble_ uses _Composables_ which are just a collection of callbacks. Most noticeably using _reassemble_ only results in a single Higher-Order-Component and thus has a significant higher performance. It also solves the problem of [Dev Tools Ballooning](https://cloud.githubusercontent.com/assets/5077042/12974970/4c6b7d3a-d0c9-11e5-9b92-9cee3b015f8c.png) which is an issue in _recompose_.\n\n## Using recompose together with reassemble\n\nBoth projects are not mutual exclusive but _reassemble_ can be used perfectly together with _recompose_. In the end _reassemble_ just produces a Higher-Order-Component that fits in nicely with the composition tools of _recompose_.\n\n## Performance\n\nAt the moment _recompose_ is a bit faster in simple compositions (though we plan to close this gap) and _reassemble_ performs  better in complex composition.\n\n[Check out current benchmarks](./benchmark)\n\n## Installation\n\n```sh\nnpm install reassemble --save\n```\n\n## Usage\n\n```js\nimport { assemble, withState, mapProps } from \"reassemble\"\n\nconst enhance = assemble(\n  withState(/*...args*/),\n  mapProps(/*...args*/),\n);\nconst EnhancedComponent = enhance(BaseComponent);\n```\n\n_Note: `assemble` is also exported with the alias `compose` to allow easy transition from recompose to reassemble_\n\n### Size optimization\n\n_reassemble_ exports also as ES6 modules and as such _tree shaking_ (e.g. with _webpack 2_) can be used to effectively reduce file size.\n\nWithout _tree shaking_ you can import the modules explicitly:\n\n```js\nimport mapProps from \"reassemble/lib/mapProps\"\nimport withState from \"reassemble/lib/withState\"\n```\n\nAnd for ES5 projects:\n\n```js\nconst mapProps = require(\"reassemble/cjs/mapProps\").mapProps\nconst withState = require(\"reassemble/cjs/withState\").withState\n```\n\n## Combining\n\nMultiple _Composables_ can be combined into one using `combine()` which makes it easy to define your own:\n\n```js\nexport const withClickCounter = combine(\n  withState('counter', 'setCounter', 0),\n  withHandlers({\n    onClick: ({counter, setCounter}) =\u003e setCounter(counter + 1),\n  }),\n);\n```\n\nThis is also useful for some _Composables_ like `branch` that takes another _Composable_ as an argument.\n\n## Support for Symbols\n\nMost of the _Composables_ supports the use of [ES6 Symbols](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Symbol). You can use _Symbols_ to pass _hidden_ props among your _Composables_.\n\n_* In some cases TypeScript users will [lose type information](https://github.com/Microsoft/TypeScript/issues/5579)._\n\n## Note for TypeScript users\n\n_reassemble_ is written in _TypeScript_ and as such comes with its own definitions. They do not follow the same type definitions as _recompose_ so some manual work is required here.\n\n## Support of recompose HOCs as Composables\n\n| Name                                                  | Support | Remarks |\n| ----------------------------------------------------- | :-----: | ------- |\n| [branch][docs branch]                                 | ✅       ||\n| [defaultProps][docs defaultProps]                     | ✅       ||\n| [flattenProps][docs flattenProps]                     | ✅       ||\n| [getContext][docs getContext]                         | ✅       ||\n| [lifecycle][docs lifecycle]                           | ❌       | Use [Lifecycle Composables](#lifecycle)  |\n| [mapProps][docs mapProps]                             | ✅       ||\n| [mapPropsStream][docs mapPropsStream]                 | ❌       | File an issue if you really need this |\n| [onlyUpdateForKeys][docs onlyUpdateForKeys]           | ✅       ||\n| [onlyUpdateForPropTypes][docs onlyUpdateForPropTypes] | ❌       | Use [onlyUpdateForKeys][docs onlyUpdateForKeys] instead |\n| [renameProp][docs renameProp]                         | ✅       ||\n| [renameProps][docs renameProps]                       | ✅       ||\n| [renderComponent][docs renderComponent]               | ✅       ||\n| [renderNothing][docs renderNothing]                   | ✅       ||\n| [setDisplayName][docs setDisplayName]                 | ✅       ||\n| [setPropTypes][docs setPropTypes]                     | ✅       ||\n| [setStatic][docs setStatic]                           | ✅       ||\n| [shouldUpdate][docs shouldUpdate]                     | ✅       ||\n| [pure][docs pure]                                     | ✅       ||\n| [withContext][docs withContext]                       | ✅       | Context will not be available in other _Composables_ of the same Component |\n| [withHandlers][docs withHandlers]                     | ✅       ||\n| [withProps][docs withProps]                           | ✅       ||\n| [withPropsOnChange][docs withPropsOnChange]           | ✅       ||\n| [withReducer][docs withReducer]                       | ✅       ||\n| [withState][docs withState]                           | ✅       ||\n| [toClass][docs toClass]                               | ✅       ||\n\n## Composables introduced by reassemble\n\n * [`debug()`](#debug)\n * [`noOp`](#noop)\n * [`omitProps()`](#omitprops)\n * [`isolate()`](#isolate)\n * [`integrate()`](#integrate)\n * [`onWillMount()`](#onwillmount)\n * [`onDidMount()`](#ondidmount)\n * [`onWillUnmount()`](#onwillunmount)\n * [`onWillReceiveProps()`](#onwillreceiveprops)\n * [`onWillUpdate()`](#onwillupdate)\n * [`onDidUpdate()`](#ondidupdate)\n\n### `debug()`\n\n```ts\ndebug(callback: (props) =\u003e void): Composable\n```\n\nRuns callback with current props. Defaults to logging to the console.\n\n### `noOp`\n\n```ts\nnoOp: Composable\n```\n\n### `omitProps()`\n\n```ts\nomitProps(...keys: string[]): Composable\n```\n\nOmit selected props.\n\n### `isolate()`\n\n```ts\nisolate(...composables: Composable[]): Composable\n```\n\nRuns passed _Composables_ in isolation: any props created will be reverted.\nUse with [`integrate()`](#integrate) to selectively keep props.\n\n```ts\nisolate(\n  withProps({\n    a: 1,\n    b: 2,\n  }),\n  integrate(\"b\"),\n)\n// { b: 3 }\n```\n\n### `integrate()`\n\n```ts\nintegrate(...keys: string[]): Composable\n```\n\nSelectively keep props that are otherwise reverted in [`isolate()`](#isolate).\n\n### Lifecycle\n\n_Warning: Lifecycle Composables are still experimental._\n\n#### `onWillMount()`\n\n```ts\nonWillMount(props): Composable\n```\n\nCalled during lifecycle `componentWillMount()`\n\n#### `onDidMount()`\n\n```ts\nonDidMount(props): Composable\n```\n\nCalled during lifecycle `componentDidMount()`\n\n#### `onWillUnmount()`\n\n```ts\nonWillUnmount(props): Composable\n```\n\nCalled during lifecycle `componentWillUnmount()`\n\n#### `onWillReceiveProps()`\n\n```ts\nonWillReceiveProps(prevProps, nextProps): Composable\n```\n\nCalled during lifecycle `componentWillReceiveProps()` and when state changes because some props are derived from state.\n\n#### `onWillUpdate()`\n\n```ts\nonWillUpdate(prevProps, nextProps): Composable\n```\n\nCalled during lifecycle `componentWillUpdate()`\n\n#### `onDidUpdate()`\n\n```ts\nonDidUpdate(prevProps, nextProps): Composable\n```\n\nCalled during lifecycle `componentDidUpdate()`\n\n## Roadmap\n\n- Compatibility with React Fiber\n- Improve Lifecycle handling\n- More performance optimizations\n- More tests\n\n## License\n\nMIT\n\n[docs branch]: https://github.com/acdlite/recompose/blob/master/docs/API.md#branch\n[docs defaultProps]: https://github.com/acdlite/recompose/blob/master/docs/API.md#defaultprops\n[docs flattenProps]: https://github.com/acdlite/recompose/blob/master/docs/API.md#flattenprops\n[docs getContext]: https://github.com/acdlite/recompose/blob/master/docs/API.md#getcontext\n[docs lifecycle]: https://github.com/acdlite/recompose/blob/master/docs/API.md#lifecycle\n[docs mapProps]: https://github.com/acdlite/recompose/blob/master/docs/API.md#mapprops\n[docs mapPropsStream]: https://github.com/acdlite/recompose/blob/master/docs/API.md#mappropsstream\n[docs omitProps]: https://github.com/acdlite/recompose/blob/master/docs/API.md#omitprops\n[docs onlyUpdateForKeys]: https://github.com/acdlite/recompose/blob/master/docs/API.md#onlyupdateforkeys\n[docs onlyUpdateForPropTypes]: https://github.com/acdlite/recompose/blob/master/docs/API.md#onlyupdateforproptypes\n[docs renameProp]: https://github.com/acdlite/recompose/blob/master/docs/API.md#renameprop\n[docs renameProps]: https://github.com/acdlite/recompose/blob/master/docs/API.md#renameprops\n[docs renderComponent]: https://github.com/acdlite/recompose/blob/master/docs/API.md#rendercomponent\n[docs renderNothing]: https://github.com/acdlite/recompose/blob/master/docs/API.md#rendernothing\n[docs setDisplayName]: https://github.com/acdlite/recompose/blob/master/docs/API.md#setdisplayname\n[docs setPropTypes]: https://github.com/acdlite/recompose/blob/master/docs/API.md#setproptypes\n[docs setStatic]: https://github.com/acdlite/recompose/blob/master/docs/API.md#setstatic\n[docs shouldUpdate]: https://github.com/acdlite/recompose/blob/master/docs/API.md#shouldupdate\n[docs pure]: https://github.com/acdlite/recompose/blob/master/docs/API.md#pure\n[docs withContext]: https://github.com/acdlite/recompose/blob/master/docs/API.md#withcontext\n[docs withHandlers]: https://github.com/acdlite/recompose/blob/master/docs/API.md#withhandlers\n[docs withProps]: https://github.com/acdlite/recompose/blob/master/docs/API.md#withprops\n[docs withPropsOnChange]: https://github.com/acdlite/recompose/blob/master/docs/API.md#withpropsonchange\n[docs withReducer]: https://github.com/acdlite/recompose/blob/master/docs/API.md#withreducer\n[docs withState]: https://github.com/acdlite/recompose/blob/master/docs/API.md#withstate\n[docs toClass]: https://github.com/acdlite/recompose/blob/master/docs/API.md#toclass\n\n[npm version]: https://www.npmjs.com/package/reassemble\n\n[npm version widget]: https://img.shields.io/npm/v/reassemble.svg?style=flat-square\n\n[build status]: https://travis-ci.org/wikiwi/reassemble\n\n[build status widget]: https://img.shields.io/travis/wikiwi/reassemble/master.svg?style=flat-square\n\n[coverage]: https://codecov.io/gh/wikiwi/reassemble\n\n[coverage widget]: https://codecov.io/gh/wikiwi/reassemble/branch/master/graph/badge.svg\n\n\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwikiwi%2Freassemble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwikiwi%2Freassemble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwikiwi%2Freassemble/lists"}