Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (Stateless Component vs Pure Component in React Application).
In this note series, we will understand about the difference between Stateless Component and Pure Component in React Application. We will be discussing how both components compare performance wise, developer experience and how both will fit into our ReactJS production project.
So Let’s Begin.
Stateless Component
STATELESS COMPONENT declared as a function that has no state and returns the same markup given the same props.
A quote from the React documentation:
” These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. They are pure functional transforms of their input, with zero boilerplate. However, we may still specify .propTypes and .defaultProps by setting them as properties on the function, just as we would set them on an ES6 class. “
Pure Component
PURE COMPONENT is one of the most significant ways to optimize React applications. The usage of Pure Component gives a considerable increase in performance because it reduces the number of render operation in the application.
Example
Let’s look at the performance aspect of both components.
class Welcome extends React.PureComponent {
render() {
return <h1>Welcome</h1>
}
}
Hello = () => {
return <h1>Hello</h1>;
}So above there is an example of a very simple Welcome Pure Component and Hello Stateless Component. When we use these two in our Parent Component, we will see Hello will re-render whenever Parent Component will re-render but Welcome Component will not.
This is because PureComponent changes the life-cycle method shouldComponentUpdate and adds some logic to automatically check whether a re-render is required for the component. This allows a PureComponent to call the method render only if it detects changes in state or props.
When to use Pure Components?
Suppose we are creating a dictionary page in which we display the meaning of all the English words starting with A. Now we can write a component which takes a word and its meaning as props and return a proper view. And suppose us using pagination to display only 10 words at a time and on scroll asking for another 10 words and updating the state of the parent component. Pure Components should be used in this case as it will avoid rendering of all the words which rendered in previous API request.
Also in cases where we want to use lifecycle methods of component then we have to use Pure components as stateless components don’t have lifecycle methods.
When to use Stateless Components?
Suppose we want to create a label with some beautiful UI which will be used to rate the credibility of a profile like BEGINNER, MODERATE, EXPERT. Since its a very small component whose re-render will hardly make any difference and creating a new component for such a small case will be time-consuming. Also if we keep making components for very small-small view, soon we will end up with so many components and it will be hard to manage when working with a big project. Also always keep in mind Pure Component comes with peculiarities of the shallowEqual.
Conclusion
In this note series, We understood about the difference between Stateless Component and Pure Component in React application.
Thanks for reading ! I hope you enjoyed and learned about the Stateless Component and Pure Component differences in React application. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe to the blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
You can also follow official website and tutorials of React as below links :
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
Thanks again Reading. HAPPY READING !!???
