recompact


Recompact is a set of React higher-order components for reactive programming. It's a drop-in replacement of Recompose with several enhancements.

Installation and Usage

To install the stable version:

``sh
yarn add recompact
`

and to use it in your code:

`js
import recompact from 'recompact'
`

Optimizing bundle size

$3

The best way to reduce build size is to use babel-plugin-lodash. It can be used with other libraries than lodash, just like this:

.babelrc

`json
{
"plugins": [
["lodash", { "id": "recompact" }],
]
}
`

Transforms
`js
import recompact from 'recompact'
import { pure, withProps } from 'recompact'

const enhance = recompact.compose(
withProps({ className: 'beautiful' }),
pure,
)
`

roughly to
`js
import _compose from 'recompact/compose'
import _pure from 'recompact/pure'
import _withProps from 'recompact/withProps'

const enhance = _compose(
_withProps({ className: 'beautiful' }),
_pure,
)
`

$3

Since tree shaking isn't ready yet to reduce build size efficiently, it is not supported in recompact.

Documentation

Benchmarks

Recompact vs. Recompose

Recompact is a drop-in replacement* for Recompose with better performance.

\* Except for the callback of withState's state updater.

$3

You may have noticed the
"compact" keyword in "Recompact". It's the main differences between Recompose and Recompact.
Recompact compacts all higher-order components into a single one. It results in a flatter React
tree. A flatter React tree has several advantages: performance improvement, better debugging (especially in React Developer Tools)
and easier testing.

Let's take two components using composition, one using recompose and one using recompact.

The two components are similar, but if you take a look at the React component tree (using React Developer Tool), you can see that the component using recompact is flat:

$3

Recompact also features higher-order components that are not included in Recompose:

- omitProps
- pickProps

And some very specific higher-order components that give you a lot of power:

- connectObs
- withObs

To learn more about how to use connectObs and withObs inside your project, please refer to this complete guide about connectObs and withObs`.

License

MIT