Higher Order Component Tips

[pwmckenna]

• Make your HoCs "Component-last and curried by default."
  This will make it much easier to chain together higher order components.
• Hoist your static class properties
  Say for instance the dumb component has some constants dangled off of it. It would be nice if the wrapped version exposed those as well. Otherwise you'll always need to access the original component even if you always use the wrapped version.
• Give your component a name indicating that its a wrapped version of a component
  Say your HoC connects a flux store to a component with the displayName BlogPost. When debugging, its really nice if your wrapped version has a name like BlogPostStoreConnector.

Here's an example Higher Order Component that just returns a component that renders the original component with some additional styling.

HoCs/style.js

import { Component } from 'react';
import hoistNonReactStatic from 'hoist-non-react-statics';

export default style => DumbComponent => {
    class Container extends Component {
        render() {
            return <DumbComponent style={style}/>;
        }
    }
    Container.displayName = 'Styled' + (DumbComponent.displayName || DumbComponent.name);
    hoistNonReactStatic(Container, DumbComponent);
    return Container;
};

index.js

import style from './HoCs/style';

const makeBold = style({ fontWeight: 'bold' });
// by making the HoC "Component-last and curried by default"
// we can create these reusable functions that can be applied over and over
const BoldBlogPost = makeBold(BlogPost);
const BoldHeader = makeBold(Header);

// BoldBlogPost.displayName === 'StyledBlogPost'
// BolderHeader.displayName === 'StyledHeader'