This is an extension of Basic Example:
The above example is called a stateless component as it does not contain state (in the React sense of the word).
Stateless Functional Components
In many applications there are smart components that hold state but render dumb components that simply receive props and return HTML as JSX. Stateless functional components are much more reusable and have a positive performance impact on your application.
They have 2 main characteristics:
1. When rendered they receive an object with all the props that were passed down
2. They must return the JSX to be rendered
In contrast to the 'stateless' components shown above, 'stateful' components have a state object that can be updated with the setState method. The state must be initialized in the constructor before it can be set:
Extending a component with PureComponent instead of Component will automatically implement the shouldComponentUpdate() lifecycle method with shallow prop and state comparison. This keeps your application more performant by reducing the amount of un-necessary renders that occur. This assumes your components are 'Pure' and always render the same output with the same state and props input.
Higher Order Components
Higher order components (HOC) allow to share component functionality.
Higher order components are used when you want to share logic across several components regardless of how different they render.