123ArticleOnline Logo
Welcome to 123ArticleOnline.com!
ALL >> Computer-Programming >> View Article

Learn Stateful And Stateless Components In Reactjs

Profile Picture
By Author: sasi
Total Articles: 1
Comment this article
Facebook ShareTwitter ShareGoogle+ ShareTwitter Share

State
A State is an object inside the constructor method of a class which is a must in the stateful components. It is used for internal communication inside a component. It allows you to create components that are interactive and reusable. It is mutable and can only be changed by using setState() method.

Simple Example of Stateful Component which has two properties.

import React, { Component } from 'react';

class StateExample extends Component {

constructor(){

super();

this.state={

first_name: '',

last_name: ''

}

}

render(){

State Component

}

}
export default StateExample;

Components
A React application is divided into smaller molecules, and each molecule represents a component. In other words, a component is the basic building of a React application. It can be either a class component or a functional component.

React components are independent and reusable and contains JSX(JavaScript XML Syntax) ...
... which a combination of JS + HTML. It may take props as the parameter and returns a Document Object Model(DOM) element that describes how the User Interface(UI) should appear.

Class Component(Stateful)

import React, { Component } from 'react';

class StateExample extends Component {

constructor(){

super();

this.state={

first_name: 'Shruti',

last_name: 'Priya'

}

}

render(){

return (

Class Component

{this.state.first_name}

{this.state.last_name}

)

}

}
export default StateExample;

Functional Component(Stateless)

import React from 'react';

function Example(props) {

return(

{props.first_name}

{props.last_name}

)

}
export default Example;

Stateful Components
Stateful components are those components which have a state. The state gets initialized in the constructor. It stores information about the component’s state change in memory. It may get changed depending upon the action of the component or child components.

Stateless Components
Stateless components are those components which don’t have any state at all, which means you can’t use this.setState inside these components. It is like a normal function with no render method. It has no lifecycle, so it is not possible to use lifecycle methods such as componentDidMount and other hooks. When react renders our stateless component, all that it needs to do is just call the stateless component and pass down the props.

Stateful vs. Stateless
A stateless component can render props, whereas a stateful component can render both props and state. A significant thing to note here is to comprehend the syntax distinction. In stateless components, the props are displayed like {props.name} but in stateful components, the props and state are rendered like {this.props.name} and {this.state.name} respectively. A stateless component renders output which depends upon props value, but a stateful component render depends upon the value of the state. A functional component is always a stateless component, but the class component can be stateless or stateful.

There are many distinct names to stateful and stateless components.

– Container components vs Presentational components

– Smart components vs Dumb components

I’m sure you guys must have guessed by just looking at the names which are stateful and stateless. Haven’t you?

State and Props used in stateful component

import React, { Component } from 'react';

class StateAndProps extends Component {

constructor(props){

super(props);

this.state={

value: '50'

}

}

render(){

return (

{this.state.value}

{this.props.value}

)

}

}
export default StateAndProps;
When should I make a component stateful or stateless?
It’s pretty straightforward that you should make your component stateful whenever you want to have a dynamic output (means that the output will change whenever the state changes), and you want to share the properties of parent component with the children components. On the other side, if there is no state necessity, you should make the component stateless.

Conclusion
Stateless components are more elegant and usually are the right choice for building the presentational components because they are just functions, you won’t find it challenging to write and understand them, and moreover, they are very straightforward to test.

There is no need for ‘this’ keyword that has always been a significant cause of confusion. Stateful components are difficult to test. Moreover, it tends to combine logic and presentation together in one single class, which is again a wrong choice for the separation issues.

Keep reading and Keep learning!!!
Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced React developers for your esteemed project today.
ReactJS Development Services

Thank you !!!

Total Views: 49Word Count: 987See All articles From Author

Add Comment

Computer Programming Articles

1. 3 Reasons You Should Consider A Mini Tower Gaming Pc
Author: Ahmed Abdelaziz

2. Photo Editing App: 9 Must-have Features
Author: Maulik Shah

3. Global Computer Graphics Market
Author: aarti

4. Japan Organ Preservation Market
Author: Rupali Dagade

5. How To Change The Primary Address On Paypal?
Author: Jackson Roy

6. Devgear: All In One Offline Utilities For Software Developers
Author: Dev Gear

7. Global Central Fill Pharmacy Automation Market W
Author: Global Central Fill Pharmacy Automation Market w

8. A Complete Procedure Of Software Development
Author: Xsosys Technology Pte Ltd

9. Top 4 Free Quiz Maker Software For Windows 10pc
Author: Ella johnson

10. Best Javascript Libraries In 2021
Author: Thomas

11. Get Custom App Designing And Development Service At Osg
Author: Orchard Solutions Global

12. The Best 4k Wallpapers For Windows
Author: Ella johnson

13. Follow Up Email Extension: Send More Than Abandoned Cart Reminders
Author: Shailesh gajjar

14. “wandavision” May Have Already Teased Up About The Villain Of The Next “doctor Strange” Film
Author: Ella Johnson

15. Software Company In Surat
Author: rnrtechvibes

Login To Account
Login Email:
Password:
Forgot Password?
New User?
Sign Up Newsletter
Email Address: