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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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
JavaScript Data Types and Data Structures Things to RememberJavaScript3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptHow to enable GD library support for PHP on windows server?PHPHere’s what we can do with PHP date() functionPHPAccessing and Setting features of JavaScript ObjectsJavaScriptSelect statement in Postgres with examplesPostgres