Stateful vs. Stateless React Components

First, a quick rundown of what React components are. In short they’re just…

• Independent pieces of functionality
• Describe a part of the UI of app
• Receives ‘properties’ object and returns a React element
• May contain many nested components
• May contain a locally scoped ‘state’ object

In code, a simple component may look like this:

The button component receives a ‘props’ object that has a handleClick property, and returns an element with the function at that property. This independent piece of functionality may be a part of a larger component, like so:

Now, back to stateless vs. stateful components. Basically, a stateful component has a state object, and a stateless components doesn’t…. Remember when I said a component receives a ‘props’ object? That is how each component gets it’s configuration. A state object is another object that a component may have when its configuration must stay dynamic. Here’s some key differences between a props object and a state object…

See how a stateful component owns it’s own state object and is dependent on it’s properties, like so:

While a stateless component only receives a props object:

There are some other key differences between these 2 components.

A stateless component is usually associated with how a concept is presented to the user. It is similar to a function in that, it takes an input (props) and returns the output (react element).

A stateful component is always a class component. It is created by extending the React.Component class. A stateful component is dependent on it’s state object and can change it’s own state. The component re-renders based on changes to it’s state, and may pass down properties of it’s state to child components as properties on a props object.

When would you use a stateless component??

1. When you just need to present the props
2. When you don’t need a state, or any internal variables
3. When creating element does not need to be interactive
4. When you want reusable code

When would you use a stateful component?

1. When building element that accepts user input
2. ..or element that is interactive on page
3. When dependent on state for rendering, such as, fetching data before rendering
4. When dependent on any data that cannot be passed down as props

In conclusion, React components break up the complexity of an application into independent parts that are simpler to implement. Stateful components are Reactive, meaning DOM updates when needed. Components maintain separation of concerns as components are loosely coupled to each other.