Understanding React’s Components: Stateless and Stateful

Bedirhan Karadoğan
Hipo
Published in
4 min readDec 17, 2018

--

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.

Functional Component

You can pass props to a functional component as well:

Functional Component with Props

And you can also declare new functions inside of a functional component.

Functional Component with Inner Functions

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:

Button Example with Functional Component

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:

Class Component

Let’s see an example of props and state usage:

Class Component with Props and State

PureComponent extended version is like below:

Pure Class Component

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:

Component vs PureComponent

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.

PureComponent vs Component

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.

--

--