• Home
  • Recent Q&A
  • Java
  • Cloud
  • JavaScript
  • Python
  • SQL
  • PHP
  • HTML
  • C++
  • Data Science
  • DBMS
  • Devops
  • Hadoop
  • Machine Learning
in React JS by
Q:

What are the stateless components?

3 Answers

0 votes
by

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.

0 votes
by
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.
0 votes
by

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

   )

 }

Related questions

0 votes
asked Jul 2, 2019 in React JS by Venkatshastri
  • #reactjs
  • #redux
  • #redux#state
0 votes
asked Jan 31 in React JS by Robindeniel
0 votes
asked Mar 30, 2020 in React JS by amita rallin
...