Pure Components in React js

React offers several different methods for creating components. Today we'll talk about the final method of creating components, the function stateless pure component. We've looked at a few different ways to build react components. One method we left out up through this point is the stateless component/functional method of building React components. As we've seen up through this point, we've only worked through building components using the React.Component and React.createClass() methods. For more performance and simplicity, React also allows us to create pure, stateless components using a normal JavaScript function. A Pure component can replace a component that only has a render function. Instead of making a full-blown component just to render some content to the screen, we can create a pure one instead. Pure components are the simplest, fastest components we can write. They are easy to write, simple to reason about, and the quickest component we can write. Before we dive into why these are better, let's write one, or heck a couple!

1const HelloWorld = () => (<div>Hello world</div>);
2// A Notification component
3const Notification = (props) => {
4 const {level, message} = props;
5 const classNames = ['alert', 'alert-' + level]
6 return (
7 <div className={classNames}>
8 {message}
9 </div>
10 )
11};
12// In ES5
13var ListItem = function(props) {
14 var handleClick = function(event) {
15 props.onClick(event);
16 };
17 return (
18 <div className="list">
19 <a
20 href="#"
21 onClick={handleClick}>
22 {props.children}
23 </a>
24 </div>
25 )
26}