Yogesh Chauhan's Blog

A short basic guide on states in React

in React on June 15, 2021

You can easily render and re-render a page in React but that’s not a recommended way of changing the DOM.

Similar read: How states work in React?

In that post I have a live demo of time changing every second. In this current post, let’s go through the bits and pieces of the useState function.

Change your app.js and index.js

If you’re adding the code in local files and not in a online code editor, you need to import state hook (useState) to add state to App component.

index.js

So your index.js file is going to be same other than removing additional variables that we added in re-rendering post.


import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(, 
document.getElementById('root'))

App.js

Let’s create App.js step by step. First of all, it will have the state hook imported.


import React, { useState } from 'react'
...

Now, we need to add state to the component and render it as well as initialize it with a value.


import React, { useState } from "react";

const App = () => {
  const [wait, showWaitTime] = useState(0);
};

export default App;


The App function above will call another function when it runs and adds state to the component. Also, it renders it with an initial value of 0.

The same function will return an array that has two items, which values will be stored in wait and showWaitTime. That way of storing values is called destructuring.


So, overall, the initial value we pass in useState will be stored in wait as well as the same value will be rendered initially.

The showWaitTime will be used to modify the state using the assigned function.

Time to finally render something

Let’s add the setTimeout function to render the component and change it every second.


import React, { useState } from "react";

const App = () => {
  const [wait, showWaitTime] = useState(0);
  setTimeout(() => showWaitTime(wait + 1), 1000);
  return <div>You've been waiting since {wait} seconds!</div>;
};

export default App;


When you call showWaitTime function for the first time to modify the state, React re-renders the component and executes the component function and sets the value to 0. But when it gets called for the second time, it calls useState function and returns a value by adding 1.

Every time the function body gets executed, it calls setTimeout, which calls the showWaitTime and the loop continues.

Every time the showWaitTime modifies the state it makes the component to re-render.


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
How to change perception and behavior of a person for acceptance of new systems?MiscellaneousCSS align-items property examplesCSSHow to add multiple Columns in CSS like Bootstrap?CSSDebugging in WordPress Part 1: WP_DEBUGWordPressFor Each Loop in Swift for BeginnersSwiftUseful (and probably ignored) HTML tags: Part 2HTML