What are the stateless components?

Question

Q:

What are the stateless components?

Answer 1

On the off chance that React components are basically state machines that produce UI markup, at that point what are stateless segments? 

Stateless components (a kind of "reusable" components) are simply pure functions that render DOM construct exclusively with respect to the properties gave to them. 

As you can see, this component has no requirement for any internal state — not to mention a constructor or lifecycle handlers. The yield of the component is absolutely a function of the properties gave to it.

Answer 2

If the behaviour is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the this keyword altogether.

Answer 3

If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These stateful components are always class components and have a state that gets initialized in the constructor.

class App extends Component {

  constructor(props) {

    super(props)

    this.state = { count: 0 }

  }

  render() {

    // ...

  }

}

React 16.8 Update:

Hooks let you use state and other React features without writing classes.

The Equivalent Functional Component

 import React, {useState} from 'react';

 const App = (props) => {

   const [count, setCount] = useState(0);

   return (

     // JSX

   )

 }