dots Created with Sketch.
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.

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 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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
URL paths in DrupalDrupalThe actual difference between indexOf() and search() in JavaScriptJavaScriptQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptLIKE and ILIKE Operators in PostgresPostgresHow to add multiple Columns in CSS like Bootstrap?CSSA Step by Step Guide to Make RSS in XML For Any Website or Blog For FreeMiscellaneous