React JS — Understanding State

React separates passing data & manipulating data with props and state. In the previous post, I’ve explained how to pass data between components by using React “props”.

Props are only being used for passing data. They are read-only which means that components receiving data by props are not able to change it. However, in some cases, a component may need to manipulate data and that’s not possible with props.

So React provides another feature for data manipulation which is known as State. In this article, you will learn what React’s “State” is and how to use it. By the way, this post is the 4th part of my React article series, I put down them below and strongly recommend to read them all if you haven’t yet:

• Part 1: React JS for Beginners — The Basics
• Part 2: React JS — Understanding Functional & Class Components
• Part 3: What is Props and how to use it in React?
• Part 4: React JS — Understanding State

What is State?

We can explain state under 5 pieces:

• State is a special object that holds dynamic data, which means that state can change over time and anytime based on user actions or certain events.
• State is private and belongs only to its component where defined, cannot be accessed from outside, but can be passed to child components via props.
• State is initialized inside its component’s constructor method.
• When a change in the state is made, state shouldn’t be modified directly. Instead, state updates should be made with a special method called setState( ).
• State should not be overly-used in order to prevent performance problems.

So these are the points basically explaining what State is, now let’s see how to use it…

Using State in a Component

In the earlier days, state could only be used in class components, but after the introduction of React Hooks, state now can be used both in class & functional components.

We will only cover here the classic usage of state with class components.

Creating The State

If you’re familiar with object-oriented programming, you know that there is a structure called class.

A class has a special method called constructor( ) and it is being called during object creation. We can also initialize our object properties or bind events inside the constructor( ).

The same rule applies to state. Since state is also an object, it should be initialized inside the constructor method:

constructor() {
  this.state = {
    id: 1,
    name: "test"
  };
}

and later we can render the properties of the state object with JavaScript’s dot notation, inside the render ( ) method:

class Test extends React.Component {
  constructor() {
    this.state = {
      id: 1,
      name: "test"
    };
  }
  render() {
    return (
      <div>
        <p>{this.state.id}</p>
        <p>{this.state.name}</p>
      </div>
    );
  }
}

Now let’s move a step forward and see how to update the state.

Updating The State

A Component’s state can change under some circumstances like a server response or user interaction (clicking on a button, scrolling the page etc).

So when data changes, when a change in the state happens, React takes this information and updates the UI.

The important point here is that we should not modify the state directly.

Do Not Modify State Directly — React Official Docs

this.state.name = "testing state";  // wrong 

So we shouldn’t change a property of the state as we do it for other objects in JavaScript. Instead, React provides another way for handling state changes: the setState( ) method.

Using setState( )

Below you can see the right way of state changes in React:

this.setState({
  name: "testing state"
});

The reason why we should use setState( ) is that because it’s the only way to notify React for data changes. Otherwise React won’t be notified and won’t be able to update the UI.

Understanding how State works is one of the most important parts of learning React.

Once you understand how to use Props & State together, developing React applications will be much easier and enjoyable. I hope my article series about React JS for Beginners will help you in the way of becoming a successful React developer.

If you want to learn more about Web Development, feel free to follow me on Youtube!

Thank you for reading!