React: Functional, Class, and Pure Components

A good React app is built through building up stand‑alone components, with modular development in mind. In fact, the biggest proponent and inventor of React ‑ Facebook ‑ makes use of over 30,000 components to build its UI and provide functionality to users.

One of the main concepts behind successful and efficient React development is reusable components that you can swap in and out, a little like LEGO pieces. In a similar way to having a separation between presentation and structure when developing with CSS and HTML, it's a great idea to keep your functional React logic far, far away from the components that render the UI for your users.

However, there are a few options for separating logic and rendering when it comes to React ‑ and optimising React involves picking the right component type for the job. So, what are your options, and when should you use them?

What are Class Components?

Class components, also known as stateful components, are the common‑or‑garden component that appear all over the place. These components have both state and props, as well as containing instructions on how to render this information to the screen.

For example, a simple component defined using an ES6 class:

class HellowWorld extends React.Component {  render() {    return <p>Hello, {this.props.planet}</p>;  }}

A class component might have logic to grab information from GraphQL and then update the component with that new information. This works because class components have access to all of the lifecycle methods. This is the most "whole" that a component can be ‑ but it also means that class components can be client‑side intensive and heavy, is that kind of bloat always helpful?

When Should You Use a Functional Component?

Functional components ‑ also known as stateless components ‑ are the other end of the spectrum to class components; they're stripped back, without logic (sometimes called "dumb"), and focused entirely on presentation.

In simplest terms, and in its simplest form, a functional component just outputs some markup. For example:

function App() {  const greeting = 'Hello World';  return <p>{greeting}</p>;}

There are a few great reasons to use a functional component. For instance, if you are looking to output a simple ListItem within a larger List component, you can simply pass props through to a functional component and have it render. The functional component works best when it's very lightweight and will only re‑render if the parent re‑renders.

How Should You Use Pure Components?

This is where React becomes a little more complex. For presentational components, you're most likely going to want to use a functional component. The drawbacks involved with using these components are generally performance‑based as the functional component re‑renders every time the parent does ‑ but this isn't the case with a pure component.

Pure components have access to the shouldComponentUpdate lifecycle method by default, and carry out a shallow check on props to determine whether the component will update or not. Pure components can also be extended to gain access to other lifecycle methods, but you should only really do that if it's absolutely necessary otherwise you'll risk bloating your previously lightweight pure component.

class PureHelloWorld extends React.PureComponent {  render() {    const { hello, world } = this.props;    return (      <p>${hello} ${world}</p>    )  }}

When working with pure components, you should also make sure that you're not passing nested props and state, as the heavy focus on performance involved in this component type prevents anything further than a one‑level deep comparison against previous props. This means that only the top level of your state or props array will be checked, meaning you are passing data that isn't being checked or used.

Wrapping up

Although it can be clear when to use a functional component vs. when to use something more lightweight, it can sometimes be tricky to determine whether you'd benefit more from using a functional component or a pure component.

A good rule of thumb is that if your component will always render the same given an input (e.g a ListItem always renders the same when it's given a string through props), you should stick with a functional component. If your component needs to figure out what to render based on props, go with a pure component ‑ but keep it simple!