Introduction on React Components
React components are like functions in Javascript, the only difference between react components and Javascript function is the reacting component which returns HTML via render function. Whatever HTML view is visible on UI is generated by components. Previously to create an HTML design like a page for the admin user, page for superuser or for any normal user we have to write HTML for each page, but with the help of it we can create one design and it will be used for all. Because these components work as function and anyone can extend the same HTML design without rewriting the same code. So, in general, we can say components provide greater reusability in UI.
Types of React Components
There are two types of main components in react js they are
- Stateful components
- Stateless components
1. Stateful Components
Any components are called stateful components, these state can be changed anywhere throughout the life cycle of components. With the name itself, we can understand it’s behavior. In these components. Stateful components are class-based components. In class-based components, we will be creating one class where we will extend the core react library. If you know little about the class concept, then you will easily be able to understand it. In this, Once we create a component with a particular class name we can use it by calling <component class name/> It looks very much like any other HTML tag. Assume that you are creating a button and you are going to use that button in all of your projects. Previously when react was not available we use to write the everywhere the same piece of code to create a button. But With the help of react js, we can write code with class and use it as many times as we want.
Example:
In the below example we are developing a react class-based component.
Code:
import React from 'react';
import ReactDOM from 'react-dom';
class ClassComponents extends React.Component {
constructor() {
super()
this.state = {
msg: "Use me anywhere"
}
}
render() {
return (
<div>
<button>{this.state.msg}</button>
</div>
);
}
}
ReactDOM.render(
<ClassComponents />, document.getElementById('root')
);
<div id="root"></div>Output:
Explanation of code:
Basically here we have created a class with name ClassComponents and this class is extending React core library which we have required. Next, we have written a render function, this function plays an important role in rendering HTML to end-user. Whatever HTML and button design is visible to us is visible because of render function only. We have used constructor function where we are initializing initial message value which will be accessible with this.state.msg code.
When should we use stateful components?
Suppose you are developing one component and you know that this component attribute is going to change many times throughout the life cycle of react components for example if your components contain users’ habits, fruits available in-store .in all these cases they will keep changing. So in such type of situation, we should create stateful components.
Advantage of stateful components
The main advantage of stateful components is we can manage all state and perform operation accordingly, for example, change in any activity of any user components will be reflected by changing into states and replicating the same to end-users components.
2. Stateless components
Any components are called stateless components because in this case, we know that all the attributes of these components will be fixed and not going to change throughout the life cycle of the component. With the name itself, we can understand it’s behavior. This is a Stateless component with a class where everything is static.
Example:
In the below example we are developing a react component having no state, it contains rules to apply a coupon.
Code:
import React from 'react';
import ReactDOM from 'react-dom';
class ClassComponents extends React.Component {
constructor() {
render() {
return (
<div>
<p>Condition to apply coupon:</p>
<ol>
<li>If you are ordering for the first time.</li>
<li>Minimum order amount should be greater than 1000.</li>
</ol>
</div>
);
}
}
ReactDOM.render(
<ClassComponents />, document.getElementById('root')
);
<div id="root"></div>Output:
Explanation of code:
As we said, in any stateless components state will not change throughout the code. Let’s take the above example; you must have done a lot of shopping online; have you ever applied any coupon on your shopping? if yes then you must have seen all the conditions of any coupons. It is possible that few conditions for any coupon to be applicable will be fixed through the coupon implementation. For example, a topstep coupon can be applicable if you are making this order for the first time, and another example order minimum amount should be 1000 or any other fixed conditions, which is not going to change.
When should we use stateless components?
suppose you are developing one component and you know that these components attributes are not going to change at all throughout the life cycle of react components, for example, if your components contain coupon implementation and few conditions are static and fixed which are not going to change throughout the life cycle. Then in that condition, we should use stateless components.
Advantage of stateless components
The main advantage of any stateless components is they are simple and easy to understand. They are faster as they do not have to maintain states. Because there are only static elements in stateless components which are very easy to manage.
Conclusion
We learned in this tutorial that there are two types of components stateless and stateful, stateful used for dynamic situations and stateless will be used for static situations.
Recommended Articles
This is a guide to React Components. Here we discuss the introduction to React Components along with its types, advantages and respective examples. You can also go through our other related articles to learn more –
