Skip to main content

Explore your training options in 10 minutes

Manage State in React with setState

Ryan Manchester - January 20, 2021

Keeping track of an application’s state is how a single page application (SAP) registers changes and renders them to the user. Unlike a model, view, controller (MVC) framework, SAPs do not redirect the user, and therefore need a way to manage changes coming from the client side. To review MVC frameworks, refer to this guide .

In React, the components themselves can manage their own state and re-render accordingly. This is done via lifecycle methods, which are discussed in depth here. For the purpose of this article, we are going to take a look at how to change state using setState.

This guide assumes basic familiarity with React. To review or learn React basics, this article lists some of the best React learning resources.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

What is React setState?

The React setState method is how to change a component’s state with stability. There are some specific guidelines in changing state in React.

  1. setState can only be called inside a class component. Class components call the constructor() method and set an initial state. Then we can change state further down by calling setState.

    There are two different types of components in React. There is the functional component and the class component. For our purposes, we are only referencing class components. For further review, check out this article on the differences between functional and class components.
  2. By only calling setState in a class component, we can directly reference the component itself using the this keyword. Calling this.setState() is best practice and ensures your code won’t break.
  3. Do not modify state directly. Modifying state directly will not register to React to re-render. The whole point of changing state is to fire a re-rendering of that component to reflect the changes back to the user.

Now, let’s take a look at syntax in the context of these guidelines.

setState React Syntax

Starting with the first guideline, we see that we can only use setState inside a class component. As an example, suppose we have a shopping app and we want to implement a shopping cart. We could set up a class component called Cart. This component will be responsible for managing its own state when a user adds an item to the cart.

class Cart extends React.Component {
    this.state = {shoppingCart: []}

Breaking down the above code, we declare the class component Cart. Like all class components, we extend React.Component. This is boilerplate React syntax.

Since we want to assign state to this component, we have to call the constructor method. Then, the base constructor is called with super(props) . It is possible to see the base constructor not called with props. The official React documentation argues that the base constructor method should always be called with props.

Now that we’ve made it through the required React syntax of constructing a class component to hold state, we are ready to assign our initial state. This is the only time we can directly reference the state. Assigning state by calling this.state = {shoppingCart: [] } allows us to set our initial state of our shopping cart to an empty array.

React setState Example

In the above section, we looked at the syntax involved in declaring an initial state. Once the state is set in the constructor method, we can render as usual:

class Cart extends React.Component {
  constructor(props) {
    this.state = {
      shoppingCart: []
  render() {
    return (
     <h1>Your Shopping Cart</h1>

  <Cart />,

Here, we have a Cart class component with its initial state set and is rendering the cart in the return statement of the render method. Let’s see how we can use setState to update our Cart.

We define a function that will add a new item to our shoppingCart while preserving the previously added items. We use JavaScript’s spread operator (…) to make a copy of the initial state and update it with the new state. This way, the shopping cart will hold all items added.

addItem(newItem) {
     shoppingCart: [...this.state.shoppingCart, newItem]

The addItem function can be used inside of React’s onClick attribute of a button if we want the user to be able to add that item once a button is clicked. For our purposes, seeing how to use setState in the context of a function is enough.

This article is meant to be an introduction to understand how to use setState and is by no means exhaustive.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot


In this article, we learned what setState is, some guidelines of how to use it, syntax, and a brief example. This is meant to be a primer article to encourage you to dig deeper and practice updating a components state on your own.

The official React documentation has further examples that will provide more opportunities to practice. Remember that in single page applications, keeping track of a component’s state is essential to rendering changes to the user.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Ryan Manchester

About the author: Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.

Skip to main content