`isLoading()` is a function that returns whether or not the component // is in a loading state const spinnerWhileLoading = isLoading => branch( isLoading, renderComponent(Spinner) // `Spinner` is a React component ) // Now use the `spinnerWhileLoading()` helper to add a loading spinner to any // base component const enhance = spinnerWhileLoading( props => !(props.title && props.author && props.content) ) const Post = enhance(({ title, author, content }) => <article> <h1>{title}</h1> <h2>By {author.name}</h2> <div>{content}</div> </article> )
= ({ 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)
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)