Functional stateless component example in React

In the previous examples we have seen that we use the 'class' keyword and extends React.Component syntax for creating a React component. This syntax is required for creating a regular React component will full feature support like state, refs, lifecycle methods etc. If we need to create simple components which don't need these features we can create simple Functional stateless components using a simpler syntax.

Functional components don’t support state, refs, or lifecycle methods, in the below example we can see that there is no reference to this.state or the class keywords.


import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const FunctionalStatelessComponent = () => (
 

    Functional Stateless React Component
 
);

ReactDOM.render(, document.getElementById('app'));

Stateless functional components are useful for presentation/UI components. Presentation/UI components focus on the UI rather than behavior, so it’s important to avoid using state in presentation components. Instead, state should be managed by higher-level “container” components, or via Flux/Redux/etc.