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.

States

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.



ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);



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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to Skip or Exclude a Specific URL or File From .htaccess Rewrite Rule?PHPHow to get ACF values from custom post type?WordPressWhat Does Host-Based Intrusion Detection System (HIDS) Mean and What Are Some Advantages Over NIDS?MiscellaneousLearn how to give a temporary name to a column or to a table using SQL AliasesSQL/MySQLHow to include CSS and JavaScript files in your WordPress plugin?WordPressThe fundamental difference between HAVING and WHERE clauses in PostgresPostgres