React component: (Stateful & Stateless)
React is the most popular JavaScript front-end library. It facilitates the building of interactive user interfaces. In practice, React is easier and quicker to learn. It plays an important role in why it is getting this much attention lately and getting popular day by day. React is all about its component which is the heart and soul of React. To have a profound knowledge of components of React would make the developers’ lives very easy.
What is React Component?
React Component is a self-sustaining and independent micro-entities that can describe a user interface. The user interface of any application might split into smaller portions, called components. Where each component is going to have their very own structure, code, and API. If we take Facebook as an example, it comprises thousands of individual react components that interface together when we view their application. The number of components in any modern application is ever-growing. They have the feature of components, it allows developers to consider each piece as an isolated piece of code. We can work on one component without thinking about its effect on the other components of code. Being reusable, it adds to the advantages of using components
What is State?
The state is the data that we import in a component generally to show the user what is prone to changes. There are so many reasons because of which data changes like the database that we’re getting our information from may get updated by the user.
Stateful and Stateless Component
Stateful and Stateless components are also called by various names like:
- Container vs Presentational components
- Smart vs Dumb components
The difference is in a literal way, one of them has a state whereas the other doesn’t!
Stateful components keep track of the data that is changing. While Stateless components will print out what is being fed to them. It will do it via props else they will always render the same thing.
Stateful/Container/Smart component:
Stateless/Presentational/Dumb Component: The function written as-
When Should The React Component Be Stateless and Stateful?
Generally, people don’t realize how the components will turn out to be from the very beginning of when you start writing one, rather you figure out as you go further. Yet, here are some important guidelines that you can refer to:
Consider and visualize your website as if it is a single component and then from there break it down into smaller components.
When the information will change then we’ll find the need of the state. It is advisable to have a parent component that keeps all the information. It passes down to its children components that are stateless.
This makes sure that if any debugging needed in case of errors about the state component so we can look up to the parent component. To see where the things got wrong instead of checking it in the children’s components. The only job for the children component will be to receive the information as the props.
Stateless components can differ on the basis of what information they receive. Whereas the stateful components keep the track of the information itself rather than taking it via props. Also giving it as the output.
We’ve presentational components when the information is not at all dynamic but completely static so we know beforehand that it is not going to change.
Here, in this stateless component, we see that it doesn’t even take props!
Stateless and Stateful Components and its Reusability:
Though you may not find the need to reuse your stateless/presentational components, nonetheless, you should build it in React as if you’re going to do so. Now, the question might arise whether the stateful components are reusable? Of course, we can reuse stateful components! Even in some cases, there is an observation that reusing stateful components have to do less work with a neater codebase. Before reusing stateful components you must keep in mind the following things:
Which of the child components can get the state of the hold of its parent. So that it becomes easier for the child component to hold props?
Whether there are a lot of components that are keeping a track of its state.
If there is any chance of minimizing the number of components holding state?
And if there is any data that is useful enough for the child component to keep a track of using state without any parental help?
Stateful Components Vs Stateless Components
A very popular method of classifying components is differentiating. them into Stateful and Stateless components that are the components that have state and that don’t have.
Stateful Components:
Stateful components are always composed of class components. As we have already mentioned, the stateful components consist of a state that initializes in the constructor.
constructor(props) {
super(props);
this.state = { count: 0 };
}
Here we have created a state object and are initializing it with a 0 count. There exists an alternative syntax that proposed for making it easier which are class fields. This is not within the ECMAScript specification but if we are going to use a babel transpiler, our syntax is going to work.
Stateless Components:
Stateless components can either shaped using a function or a class. But unless we need to use a life cycle hook, we should go for functional components that are stateless. There is a lot of usefulness if we decide to stateless functional components. The benefits of using stateless functional components are: they are easy to write, understand, and test. Yet, as of now, there are no extra performance benefits of using stateless functional components over the class components. Whereas the downside is that we won’t be able to use lifecycle hooks.
While talking about Stateful and Stateless components we should also have an idea about another pattern which is very beneficial while writing components. The usefulness of this method is that the presentational logic gets separated from the behavioral logic. So it divides between Presentational Components and Container Components.
Presentational Components:
Presentational Components are actually how things will look. These components are there for accepting props from the container counterpart. Everything related to rendering the UI is a part of the Presentational Components. They can be used again and must stay different from Behavioral Components. Functional components should be our first choice when we are writing presentational components unless there is a need for a state. If a state-required by the presentational component, the UI data is important and not the actual data. We should keep in mind that presentational components never interact with the Redux store or make any API calls.
Container Components:
The Container Components is the behavioral aspect. It tells the presentational component what and what not should render using props. The container component should never contain DOMS with limited markup and styles. If we are going to use Redux, a container component will contain the code that will dispatch an action to a store. This is also a place where we should place our API calls and the result should is in the state of the component. The usual structure is the presence of a structural component on top that will pass down data to its children’s presentational components as props. This is going to work fine for smaller projects but when we will have larger projects, things will get a lot messier with a lot of intermediate components that are going to accept and pass on props. Because of this, it is always a good idea to make a container component unique to the leaf component. This, in turn, will also ease the brain on the intermediate components.
Conclusion
The Stateless function components are very elegant. They are in most situations the right choice for creating presentation components. The reason being that stateless functional components are functions and we are not going to have a difficult time writing and understanding them. Besides that, they are easy to test. We must remember that functional react components don’t have upper edge optimization. This may change with the future versions of React where they might optimize functional components for better performance. Thus if we don’t have to care about performance. we must choose the functional components for its nice view and presentation and class components.
[…] the states is quite easy with React. But what if we have to pass those states from one component to another? Well, one can easily answer this by saying “pass the state to other components as […]
[…] application that is developed in ReactJS is made of components. The process of breaking the code into smaller components in ReactJS helps to split the UI into […]
[…] zoom image on hover is a react component that is used to zoom images on desktop browsers on mouse […]