ReactJS : Functional or Stateless components

ReactJS : Functional or Stateless components

Many times you might come across a situation where React Component doesn’t need any state, which we call as stateless components. Thanks to React0.14 update, It introduced new types of react components with no state. 

React Stateless components are very much needed when the components is readonly doesn’t perform any operation other than just showing information.

How to Write React Functional component ?

React Functional Component Example: for stateless react component or a functional react component

const MessageBar = function(props) {
  return <p>Dear {props.username} you have completed the task successfully</p>;
};

The same component can nicely be written in one line using ES2015 standard as follows

const MessageBar = ({ username }) => <p>Dear {username} user, you have successfully completed the task</p>;

 

Conceptually components are like javascript functions here, they accept inputs as props, and return react elements. Functional components wherever required will also reduce load on redux since it is not required to maintain state for these components.

For more information on React functional components visit facebook react official site 

Check Advantages of React Functional Components

Also Check How to integrated Google Maps in reactJS : http://knowledge-cess.com/reactjs-google-map-component/