The React way of dynamically updating a website’s content is different from Vanilla JavaScript. In JavaScript, we do it by directly manipulating DOM, whereas in React, we have a feature called . useState It is one of the built-in hooks in React. It helps us to declare state variables in Functional Components. We pass the initial state to the useState hook, and in return, it gives us a variable with our state value and a function to update the value. Now let’s compare both ways (JavaScript and React) with an example. Suppose you’ve been given a bag filled with five apples and after some time, you are given seven more apples to put into your bag. Now how many apples will you have in your bag? It's 5+7=12, right? Let’s see how we can show this example in both JavaScript and React: The JavaScript Way I’ve created this HTML/CSS/JS code template to show this example live; you can access it . repl.it here HTML <!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>replit</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <div>
     <p>Apples</p>
     <p class="value">5</p>
     <button>Update values</button>
   </div>
   <script src="script.js"></script>
 </body>
</html> JavaScript const value = document.querySelector('.value')
const button = document.querySelector('button')

let realValue = parseInt(value.innerHTML)
let updateValue = () => {
 realValue+=7
 return value.innerHTML = realValue
}
button.addEventListener('click', updateValue) Code Explanation We’ve created two HTML paragraphs - , added a class called value to 5 to update it later, and created a button called . apples and 5 Update values In our JavaScript code, We stored the class and the button into two different variables. value Next, we used function to convert the value of our apples into integers and store it into another variable called . parseInt() realValue Then we created a function called , inside which we first added 7 to the current value of the variable and assigned this updated to the HTML value of our variable with the help of . updateValue realValue realValue value .innerHTML Finally, we added the click event listener to our button to call the function every time the button gets clicked. updateValue The React Way - useState() Check out the repl of the same app created with React, . here App.js import React, {useState} from 'react';
import './App.css';

function App() {

 const [apples, setApples] = useState(5)
 const updateApples = () => {
   return setApples(apples+7)
 }
 return (
   <div>
     <p>Apples</p>
     <p>{apples}</p>
     <button onClick={updateApples}>Update Apples</button>
   </div>
 );
}

export default App; Code Explanation We start with importing React and useState from React. const [apples, setApples] = useState(5) The snippet above is the standard way of declaring useState. Here useState gives us a variable called with the value of 5 as initialized under the function call and another function called to update the value of variable. apples useState setApples apples Next, we declared a function called which will be called every time someone clicks our button, which is yet to be declared. updateApples Update Apples return setApples(apples+7) In the above snippet, we return function call and add 7 to the variable as an argument. This is how the state is updated in useState. setApples() apples return (
   <div>
     <p>Apples</p>
     <p>{apples}</p>
     <button onClick={updateApples}>Update Apples</button>
   </div>
 );
} Now finally, we made our return statement. We returned an element with 2 paragraph elements, one for and one for the value of apples, similar to how we did this in the JavaScript version. The twist here is that instead of directly writing the value, we used the variable from the hook to declare the value of apples. <div> Apples apples useState() And at last, we created a button and attached the the function we declared earlier to the event handler. updateApples onClick Up to this point in the article, we have learned hook, and how it works and compared it with DOM manipulation in Vanilla JavaScript. Now before ending this article, we’ll build a Counter App, which is the classic example of and React. useState() useState() Counter App with useState() Before starting, if you want to know how this app will work, you can check out this . repl Code import React, {useState} from 'react';
import './App.css';

function App() {

 const [addCount, setAddCount] = useState(0);
 const [subtractCount, setSubtractCount] = useState(0);

 return (
   <div>
     <p>Your value is {addCount}</p>
     <button onClick={() => setAddCount(addCount + 1)}>
       Add
     </button>

     <p>Your value is {subtractCount}</p>
     <button onClick={() => setSubtractCount(subtractCount - 1)}>
       Subtract
     </button>
   </div>
 );
}
export default App; Explanation In our function, we declared 2 hooks, one for up the values in the counter and the other one for the values as you can see in their names. Both useStates are initialized with the value of 0. App() useState() adding subtracting The return statement returns an element with two elements and two elements for our and variables. <div> <p> <button> addCount subtractCount Both paragraphs show as a default text followed by their respective state variables, i.e., and . These state variables display their current value on the screen. Your value is addCount subtractCount Then there are two buttons that call their respective and functions to add or subtract values from our state variables. setAddCount() setSubtractCount() Great, now both the Update Apple and Counter App are finished, and I hope you would have understood by now what useState hook is and how it works. If yes, show your love by sharing your thoughts and the article on social media. Happy Coding ✌️ Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

20 Essential Backend Tools For Developers

13 Useful React Libraries for Devs in 2023

Get In Touch With Me

2021 - HackerNoon Contributor of the Year - SIDE-PROJECT

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Beginners Guide

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Open Source

Too Long; Didn't Read

Make resilience your competitive advantage

React useState() Made Easy for Beginners

React useState() Made Easy for Beginners

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Reasons To Use TailwindCSS In Your Next Project

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Fantastic JavaScript Projects for Beginners

11 Great Tips From A Guy Who Leveled Up From Intern To Dev

125 Stories To Learn How To Do X

10 Reasons To Use TailwindCSS In Your Next Project

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Fantastic JavaScript Projects for Beginners

11 Great Tips From A Guy Who Leveled Up From Intern To Dev

125 Stories To Learn How To Do X

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps