ALL >> Computer-Programming >> View Article
Learn Stateful And Stateless Components In Reactjs

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 !!!
Add Comment
Computer Programming Articles
1. Which Is The Best Programming Language To Build A Mobile App?Author: DianApps
2. Explore Career Growth With The Best Business Analytics Courses In Bhopal
Author: Rohan Rajput
3. From Zero To Hero: Python Pygame Tutorial For Aspiring Game Developers
Author: Tech Point
4. Beginner’s Python Pytorch Tutorial: Start Your Ai Journey Today
Author: Tech Point
5. Top 10 Cloud Security Threats And How To Prevent Them
Author: GIGABITTechnologies
6. Error Code 30174-45 In Office 365/2019/2021 In Windows 10/11
Author: jamess
7. Complete Python Tkinter Tutorial: Master Gui Programming Easily
Author: Tech Point
8. Unlock Your Data Skills With The Best Business Analytics Courses In Bhopal
Author: Rohan Rajput
9. Clinic Management Software: Features, Benefits, And How To Choose The Right One
Author: Agness Ruth
10. Top Training Institutes For The Best Business Analytics Courses In Bhopal
Author: Rohan Rajput
11. Why Is The Cloud Networking Solution Important For Any Business?
Author: GIGABITTechnologies
12. Pros And Cons Of Having A Design System
Author: brainbell10
13. Discover The Best Business Analytics Courses In Bhopal To Elevate Your Career
Author: Rohan Rajput
14. Exploring Decentralized Exchange Development
Author: davidbeckam
15. How Decentralized Exchanges Make Crypto Trading Better
Author: davidbeckam