Stateful vs. Stateless Components in React JS

Rachel Brandsness
Jul 1 · 3 min read

Whether you’ve been working with JavaScript for years or only just a month or two, chances are you’ve heard of React JS, maybe you’ve even used it yourself. If you haven’t used it, or are brand new to this powerful, dynamic JavaScript library, one of the first things you’ll want to look into is the way apps in React are structured, specifically via components.

Web apps in React JS are broken down into two main types of components, stateful and stateless, but what exactly is the difference and how does one decide which type to use and where? To understand the difference and better answer these questions, first one has to understand state as it relates to components in React.

State in React is really just imported data, that is more often shown in some way or another to the user of the app. This data might be entered into the app by the user his or herself or it may be imported from an API or database, but very likely, your user will be interacting with it in some way and therefore it is likely to be dynamic and subject to change.

This brings us back to our components, stateful components in React, as one might guess based on their name, have state, while stateless components do not. This means that stateful components are better suited to keep track of and display our app’s dynamic data, while stateless components are more often than not better suited to displaying more static information that they are given. In general, one can think of a stateful components as a components that may render slightly differently dependent on the data it is currently dealing with, while a stateless component will render always render in exactly the same way.

A great example of this might be a stateful component that holds an array full of objects representing movies. This component will render showing different movies based on which ones can be found in the array, possibly showing more or less of them depending on what the user is looking for. This movie data might be passed to an un-ordered or ordered list component that renders 10 list items each containing a different movie based on user search criteria. The component used for the list would very likely be a stateless component. This is because the list component doesn’t need to know the details of what movies are being displayed and why, it just knows that anytime it is rendered it will show 10 list items, containing some kind of content.

This ability to make stateful and stateless components makes React an extremely powerful and flexible JavaScript library that can be used for a wide variety of projects. While it can sometimes be confusing, especially when getting those first few React projects under one’s belt, the best thing to do is to take a little time at the outset of creating your app to plan what it will do and break it down into individual components. From there, ask yourself where you will need to store your state and make sure that you will be able to pass any necessary data to components without their own state. Once you’ve got this mapped out you are on your way to building your application and experiencing the power and convenience of developing in React JS!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade