Understanding React’s Components: Stateless and Stateful
One of the biggest advantages of modern front-end development libraries is the components. So we should understand what they really are and how to use them efficiently.
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. (from reactjs.org)
There are two main types of components in React: functional components (aka stateless components) and class components (aka stateful components).
Functional (Stateless) Components
A functional component is just a Javascript function that returns a React element. While declaring a functional component you can also use arrow functions. It just should be declared in any version of Javascript functions.
You can use render, props and context APIs with a functional component.
You can pass props to a functional component as well:
And you can also declare new functions inside of a functional component.
If your component does not require usage of state, refs or any of the lifecycle hooks and if there won’t be a need for re-rendering after component has been mounted then you can use a functional component.
In real life projects, functional components are being used to make simple buttons, badges etc. See the example below:
If you are saying “Oh no, I need the state, refs, lifecycle hooks and there will be re-rendering all the time!” then you should use a class component instead.
Class (Stateful) Components
Obviously, a class component is a React class. You can use render, props, state, refs, context and lifecycle hooks with this type of component.
While declaring a class component, you should extend React’s PureComponent
or Component
class. Then whatever you return from the render function will be showing on the screen.
Component
extended version is like below:
Let’s see an example of props and state usage:
PureComponent
extended version is like below:
When you compare Component
and PureComponent
examples the only difference you can see is in the class ClassComponent extends
line. But there is an important difference between them. PureComponent
has some logic in its shouldComponentUpdate
lifecycle hook to check that re-render is required or not, so it’s been re-rendered only if there is change on props or state. Except for this it’s exactly same with the Component
But there is a shallow comparison in here, so deeply nested objects and arrays will not be compared properly. Because deep comparison is highly expensive (aim is increasing performance not decreasing).
See the example below to understand the difference better:
In this example I set an interval timer to set the state every second (do not try this at home!). But actually there is no change on the state because I’m simply setting the state to it’s previous state. In this case Component
will be re-rendered every second. On the other hand, PureComponent
will be rendered just once. Because PureComponent
knows that there is actually no change.
Making a decision between Component
and PureComponent
is just a matter of performance. PureComponent
declaration has a significant effect on performance. But you should keep in mind that, if there are child components inside of a PureComponent
, they won’t be re-rendered until PureComponent
has been re-rendered.
It’s also a good practice in terms of performance to add your own logic for comparison to the shouldComponentUpdate
lifecycle hook of the Component
extended class instead of using PureComponent
For this you can basically add a logic to the shouldComponentUpdate
lifecycle hook of the RenderClassComponents
component like the following:
In this case result will be like this (no unnecessary re-renderings):
Conclusion
Deciding between stateless and stateful components depends on your needs. You should think carefully about how each component will be used. If you won’t use state, refs or lifecycle hooks then you should choose stateless components, because there is a significant difference between transpiled versions of them.
Transpiled version of stateless component:
Transpiled version of stateful component:
I hope this article would help you to understand the difference between stateless and stateful components.
In the next article I will tackle component lifecycle hooks in detail.
Thanks for reading.
Keep an eye on posts from Hipo by subscribing to our newsletter and following us on Twitter.