recompose

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today, we announced a proposal for Hooks. Hooks solves all the problems I attempted to address with Recompose three years ago, and more on top of that. I will be discontinuing active maintenance of this package (excluding perhaps bugfixes or patches for compatibility with future React releases), and recommending that people use Hooks instead. Your existing code with Recompose will still work, just don't expect any new features. Thank you so, so much to @wuct and @istarkov for their heroic work maintaining Recompose over the last few years. Read more discussion about this decision here. Recompose Recompose is a React utility belt for function components and higher-order components. Think of it like lodash for React. Full API documentation - Learn about each helper Recompose Base Fiddle - Easy way to dive in npm install recompose --save 📺 Watch Andrew's talk on Recompose at React Europe. (Note: Performance optimizations he speaks about have been removed, more info here) Related modules recompose-relay — Recompose helpers for Relay You can use Recompose to... ...lift state into functional wrappers Helpers like withState() and withReducer() provide a nicer way to express state updates: const enhance = withState('counter', 'setCounter', 0) const Counter = enhance(({ counter, setCounter }) => <div> Count: {counter} <button onClick={() => setCounter(n => n + 1)}>Increment</button> <button onClick={() => setCounter(n => n - 1)}>Decrement</button> </div> ) Or with a Redux-style reducer: const counterReducer = (count, action) => { switch (action.type) { case INCREMENT: return count + 1 case DECREMENT: return count - 1 default: return count } } const enhance = withReducer('counter', 'dispatch', counterReducer, 0) const Counter = enhance(({ counter, dispatch }) => <div> Count: {counter} <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button> <button onClick={() => dispatch({ type: DECREMENT })}>Decrement</button> </div> ) ...perform the most common React patterns Helpers like componentFromProp() and withContext() encapsulate common React patterns into a simple functional interface: const enhance = defaultProps({ component: 'button' }) const Button = enhance(componentFromProp('component')) <Button /> // renders <button> <Button component={Link} /> // renders <Link /> const provide = store => withContext( { store: PropTypes.object }, () => ({ store }) ) // Apply to base component // Descendants of App have access to context.store const AppWithContext = provide(store)(App) ...optimize rendering performance No need to write a new class just to implement shouldComponentUpdate(). Recompose helpers like pure() and onlyUpdateForKeys() do this for you: // A component that is expensive to render const ExpensiveComponent = ({ propA, propB }) => {...} // Optimized version of same component, using shallow comparison of props // Same effect as extending React.PureComponent const OptimizedComponent = pure(ExpensiveComponent) // Even more optimized: only updates if specific prop keys have changed const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent) ...interoperate with other libraries Recompose helpers integrate really nicely with external libraries like Relay, Redux, and RxJS const enhance = compose( // This is a Recompose-friendly version of Relay.createContainer(), provided by recompose-relay createContainer({ fragments: { post: () => Relay.QL` fragment on Post { title, content } ` } }), flattenProp('post') ) const Post = enhance(({ title, content }) => <article> <h1>{title}</h1> <div>{content}</div> </article> ) ...build your own libraries Many React libraries end up implementing the same utilities over and over again, like shallowEqual() and getDisplayName(). Recompose provides these utilities for you. // Any Recompose module can be imported individually import getDisplayName from 'recompose/getDisplayName' ConnectedComponent.displayName = `connect(${getDisplayName(BaseComponent)})` // Or, even better: import wrapDisplayName from 'recompose/wrapDisplayName' ConnectedComponent.displayName = wrapDisplayName(BaseComponent, 'connect') import toClass from 'recompose/toClass' // Converts a function component to a class component, e.g. so it can be given // a ref. Returns class components as is. const ClassComponent = toClass(FunctionComponent) ...and more API docs Read them here Flow support Read the docs Translation Traditional Chinese Why Forget ES6 classes vs. createClass(). An idiomatic React application consists mostly of function components. const Greeting = props => <p> Hello, {props.name}! </p> Function components have several key advantages: They help prevent abuse of the setState() API, favoring props instead. They encourage the "smart" vs. "dumb" component pattern. They encourage code that is more reusable and modular. They discourage giant, complicated components that do too many things. They allow React to make performance optimizations by avoiding unnecessary checks and memory allocations. (Note that although Recompose encourages the use of function components whenever possible, it works with normal React components as well.) Higher-order components made easy Most of the time when we talk about composition in React, we're talking about composition of components. For example, a <Blog> component may be composed of many <Post> components, which are composed of many <Comment> components. Recompose focuses on another unit of composition: higher-order components (HoCs). HoCs are functions that accept a base component and return a new component with additional functionality. They can be used to abstract common tasks into reusable pieces. Recompose provides a