Understanding setState/useState in React

In this Blog I will be answering the question "how do I use setState/useState in Class and Function Components?" Before we answer this question, we will discuss a little of what exact is a State in React.

What is a State?

Like props, States in React are objects that store data and affect how a component renders or behaves. The difference is that unlike props, states are managed within the component and can be changed over time.

How to Access a Component's State?

A component's state can be accessed like other objects by using
this.state.property_name

• Note: In a class component we assign the initial state in our constructor.

Example:

class Sports extends React.Component {
  constructor(props) {
    super(props)

  this.state = {
    sports: ['basketball', 'football', 'soccer'],
    count: 0
  }

  render() {
    return (
      <div className = "container">
        <p> I have played {this.state.count} sport(s) </p>
      </div>
    );
   }
  }
}

How to Update a Component's State using Class VS Function Components?

Class Components

There are two types of components in React. There is a class component and a functional component. Class components call the constructor() method and set an initial state. Then we can change state further down by calling setState.

We can use the setState() method because it accepts an object that eventually merges into the component's existing state. This method schedules changes to the component's state object and tells React that the component and its children must re-render with the updated state.


//Instead of doing this
this.state.name = 'Michael Jordan';



//Do this
this.setState({name: 'Michael Jordan'});


Functional Component

In functional components we can use React Hooks. A Hook is a special function that lets you "hook into" React features. Previously, we had to convert a function to a class if we needed to add some state. Now, we can use a Hook inside the function component.

Unlike a class component, we have no "this" in a function component so we can't assign or read this.state. Instead, we call the useState Hook directly inside our component. The useState Hook is a Hook that lets us add React state to function components.

useState() is a new way to use the exact same capabilities as this.state provides in a class. The only argument to the useState() Hook is the initial state.

Example

import React, {useState} from 'react';

function Example() {
  const [count, setCount] =useState(0);

Conclusion

This concludes our overview of setState()/useState(). Things to remember:

1. Do not modify state directly. Modifying it directly with produce incorrect behavior causing it not to re-render
2. We don't need to call setState every time we change a variable. We call setState only when we want the change in a variable to reflect on the UI of the screen.
3. We import the useState Hook from React. It lets us keep local state in a function component.