Stateless components

The React stateless component (a functional component) is just a pure JavaScript function that takes props as an argument and returns a react element. The following example shows how a stateless component is used by using the arrow function:

import React from 'react';

const HeaderText = (props) => {
 return (
   <h1>
     {props.text}
   </h1>
 )
}

export default HeaderText;

Now, when you use functions to define a React component, you don't have to use the this keyword. A stateless component defined using a function doesn't have life cycle methods. For example, in the previous HeaderText example, you can see that there is no render() method.

Our HeaderText example component is called a pure component. A component is said to be pure if its return value is consistently the same given the same input values. React has introduced React...