reassemble

reassemble is a library for the composition of React Higher-Order-Components optimized for performance.

reassemble vs recompose

reassemble is very similar to 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 which is an issue in recompose.

Using recompose together with reassemble

Both 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.

Performance

At the moment recompose is a bit faster in simple compositions (though we plan to close this gap) and reassemble performs better in complex composition.

Check out current benchmarks

Installation

npm install reassemble --save

Usage

import { assemble, withState, mapProps } from "reassemble"

const enhance = assemble(
  withState(/*...args*/),
  mapProps(/*...args*/),
);
const EnhancedComponent = enhance(BaseComponent);

Note: assemble is also exported with the alias compose to allow easy transition from recompose to reassemble

Size optimization

reassemble exports also as ES6 modules and as such tree shaking (e.g. with webpack 2) can be used to effectively reduce file size.

Without tree shaking you can import the modules explicitly:

import mapProps from "reassemble/lib/mapProps"
import withState from "reassemble/lib/withState"

And for ES5 projects:

const mapProps = require("reassemble/cjs/mapProps").mapProps
const withState = require("reassemble/cjs/withState").withState

Combining

Multiple Composables can be combined into one using combine() which makes it easy to define your own:

export const withClickCounter = combine(
  withState('counter', 'setCounter', 0),
  withHandlers({
    onClick: ({counter, setCounter}) => setCounter(counter + 1),
  }),
);

This is also useful for some Composables like branch that takes another Composable as an argument.

Support for Symbols

Most of the Composables supports the use of ES6 Symbols. You can use Symbols to pass hidden props among your Composables.

* In some cases TypeScript users will lose type information.

Note for TypeScript users

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.

Support of recompose HOCs as Composables

Name	Support	Remarks
branch	✅
defaultProps	✅
flattenProps	✅
getContext	✅
lifecycle	❌	Use Lifecycle Composables
mapProps	✅
mapPropsStream	❌	File an issue if you really need this
onlyUpdateForKeys	✅
onlyUpdateForPropTypes	❌	Use onlyUpdateForKeys instead
renameProp	✅
renameProps	✅
renderComponent	✅
renderNothing	✅
setDisplayName	✅
setPropTypes	✅
setStatic	✅
shouldUpdate	✅
pure	✅
withContext	✅	Context will not be available in other Composables of the same Component
withHandlers	✅
withProps	✅
withPropsOnChange	✅
withReducer	✅
withState	✅
toClass	✅

Composables introduced by reassemble

• debug()
• noOp
• omitProps()
• isolate()
• integrate()
• onWillMount()
• onDidMount()
• onWillUnmount()
• onWillReceiveProps()
• onWillUpdate()
• onDidUpdate()

debug()

debug(callback: (props) => void): Composable

Runs callback with current props. Defaults to logging to the console.

noOp

noOp: Composable

omitProps()

omitProps(...keys: string[]): Composable

Omit selected props.

isolate()

isolate(...composables: Composable[]): Composable

Runs passed Composables in isolation: any props created will be reverted. Use with integrate() to selectively keep props.

isolate(
  withProps({
    a: 1,
    b: 2,
  }),
  integrate("b"),
)
// { b: 3 }

integrate()

integrate(...keys: string[]): Composable

Selectively keep props that are otherwise reverted in isolate().

Lifecycle

Warning: Lifecycle Composables are still experimental.

onWillMount()

onWillMount(props): Composable

Called during lifecycle componentWillMount()

onDidMount()

onDidMount(props): Composable

Called during lifecycle componentDidMount()

onWillUnmount()

onWillUnmount(props): Composable

Called during lifecycle componentWillUnmount()

onWillReceiveProps()

onWillReceiveProps(prevProps, nextProps): Composable

Called during lifecycle componentWillReceiveProps() and when state changes because some props are derived from state.

onWillUpdate()

onWillUpdate(prevProps, nextProps): Composable

Called during lifecycle componentWillUpdate()

onDidUpdate()

onDidUpdate(prevProps, nextProps): Composable

Called during lifecycle componentDidUpdate()

Roadmap

• Compatibility with React Fiber
• Improve Lifecycle handling
• More performance optimizations
• More tests

License

MIT