Tips for making reusable React components

Tip 1: props.children

Instead of invoking the component with a self-closing tag <Picture /> if you invoke it will full opening and closing tags <Picture> </Picture> you can then place more code between it and display using this.props.children (props.children for stateless components) .

This decouples the <Picture> component from its content and makes it more reusable.

Tip 2: Stateless Components

Stateless components are pure functions and hence, by default reusable.

Tip 3: Component Composition

Favor stateless component composition over component inheritance.

No Comments

You can leave the first : )

Leave a Reply

Your email address will not be published. Required fields are marked *