Yogesh Chauhan's Blog

How states work in React?

in React on April 26, 2021

First of all let’s understand why do we even need states.

Props are Read-Only

We saw earlier in this Components and Props in React post that you can declare the components in two different ways. No matter which method you use to do so, one thing is clear. It must not modify its props.

That’s where the states concept comes into play.

With States React Components can change their output based on events.


In this Rendering Elements Example, we saw how to change the element. Just rendering the same element again and again. But we don’t need to do that. We can just simple change the state of that element and change the UI.

Here’s the working example:

In the example above, we are Rendering the element to change the output but not changing the states. Let’s try to achieve the same outcome by changing the states.

Let’s change the way clock looks first (encapsulation):

Still, in the updated code above, Clock component is not updating the UI itself.

We need to have ReactDOM.render like this and inside the Clock component we’ll change the states so that the clock can update itself.

  <Clock />,

Function to Class

To do so, we need to convert the function component into a class component and then add state to it.

States are similar to props but they are private and fully controlled by the component class.

Let’s convert the function into a class and update the code:

In the updated code above, the render method will be called each second as setInterval calls tick function every second.

What we have changed is we render the element into the same DOM so there will be only one instance of the Clock class that will be used. Since we have one DOM and one instance of the Clock class, we can use the local state and lifecycle methods on it.

Local State

We can make use of this post: How to add Local State to a Class in React?

Here’s the updated code after following those steps:

Lifecycle methods

Now, it’s time to add lifecycle methods. We can make use of this post: How to add Lifecycle Methods to a Class in React?

After that, all we need to do is implement a method called tick(). The Clock component will run tick() method every second.

The tick() method will use this.setState() to schedule updates to the component local state.

Here’s the updated code:

This is what happens in the final code:

  1. When we pass Clock element to ReactDOM.render(), it’s going to call base constructor of Clock component. That will set its state to the current time using this.state.
  2. React will go for the render method to check what to display and show the output.
  3. When the output is displayed in the DOM, React will check for componentDidMount method which will set a timer in the browser to call tick method every second.
  4. Browser does as instructed and calls tick method every second.
    1. The tick method updates the state with a new time.
    2. React understands the change in state and calls render method again to update the DOM.
  5. If you remove Clock component from the DOM then React will call componentWillUnmount method and stop the timer.

Source: React Docs

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
What is a “promise” in JavaScript?JavaScriptWordPress: How to find all posts from a custom post type with specific custom field?WordPressHow to create a circle that follows a cursor using JavaScript and CSS?CSSHow to set default timezone using PHP?PHPIntroduction to components and templates Part 1: Component MetadataAngularCSS align-items property examplesCSS