YogeshChauhan . com

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

amazon

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

How to add a ribbon inside a container using CSS?CSSThe difference between isFinite() method and isFinite() function in JavaScriptJavaScriptSome SQL LIKE Operators We Need to Keep in MindSQL/MySQLThe substr() method in JavaScript and how it’s different from substring()JavaScriptSome EASY-to-Understand CSS media query examplesCSSCSS align-items property examplesCSS