block5.class

MyComponent extends React.Component {
	render() {
		return (
			<div>
				{this.renderItemA()}
				{this.renderItemB()}
				{this.renderItemC()}
				{this.renderItemD()}				
			</div>
		)
	}
}
``` 

The `render()` method in a component includes several “sub render“ method. In such a situation, it’s highly likely you can extract each sub render method into a separate component. It makes the parent component look cleaner, smaller, easier to read and test.

## Tip Four: Don’t pre-optimize component performance
I often see advice against inline function because it will hit performance:

```js
function MyComponent() {
	return (
		<InnerComponent title={title} onClick={() => { /* do something */ }} /> // the inline function will always cause re-render
	)
}