In this tutorial, you will gain a better understanding of the different types of components you can build within React and why you may choose one over the other.  In React you have two main types of components, stateless and component classes.

Stateless Vs Components

When you start building a new component in React, one of the first questions you will need to consider is if the component will need to manage any state.  If you want to build a simple component that renders some pretty static HTML every time, then a stateless component may be a good consideration. Stateless components are pretty simple, they render JSX.

const statelessExample = props => <div>{props.text}</div>;

Components, on the other hand, are more useful when you need to manage state.  The component class has different event hooks you can work with to do more powerful things with your component, like:

  • constructor()
  • render()
  • componentDidMount()
  • componentDidUpdate()

If you need the user to input some text in a textbox, or, you need to call an API, then you will want to use a component.

The Different Types Of Component Class

When you start building a React app, you will have access to two similar classes you can inherit from:

  • PureComponent 
  • Component

The big difference between the two is down to performance.  In PureComponent you have access to the event shouldComponentUpdate().  Within shouldComponentUpdate() a shallow compare will be made to allow React to determine if it needs to re-render a component.

For small components this might not be needed, if you are parsing lots of data from an API then this can make your page load quicker.  As it's pretty easy to change a component from one to another, if you are to keen on premature optimization, you can delay this decision until later on.  

The important thing to get is that there is some optimisation the React frameworks make when rendering.

Render()

When React displays a component, it calls the render() method.  React will call render on load.  React will also recall rendering, anytime a component props or state change.  This concept is pretty key to grasp.  If you have ever heard of a state machine pattern, React works like a state machine, it automatically calls re-renders every time the state changes. 

This is why it's important to try and not mutate the state of props being passed in unnecessarily, as it can lead to React trying pointlessly to re-render a component too many times.  

An example may help to understand why this is useful.  Let's say you have a component that displays blog posts from an external API.  In the componentDidMount() you make the API request.  The data is stored in an object in the components state called, blogs.  As soon as you update the object in the state, React will run the render method automatically.  Next time the render is read the component will iterate over the blog posts collection in the state - which will now be populated and render the component with blog posts.  All this is now done behind the scenes and you do not have to worry about manually hooking it up.  This makes life very simple. 

Stateless V Component - Which One Is Faster?

As stateless components are more simple, a common assumption people new to React often make is assuming that using a stateless component will be more efficient, which is not the case.  

As you've seen in PureComponent, React makes some optimizations on the component and prevents rendering it.  This means using a PureComponent can be a lot more efficient on more compliments.  It's one of the things you should consider, just because stateless is simpler, it is quicker.

As React is pretty quick, for most situations, you may never care about this, however, it is something you need to be aware of when designing your app.  If you want to learn a little more about how components work in React I suggest you check out, React Performance Devtool