React Hooks {useState} Explained!

Published by Pawan Sargar on

React Hooks Explained!

Are you starting your journey to become a React Developer? then this post is going to be important for you. Hooks are one of the important parts of React, it overall explains how React works. Also, if you want to master React, you need a good understanding of Hooks.

React changed its look completely after the version 16.8 release which introduced the Functional Components & Hooks which supported the State & Lifecycle features. Before version 16.8, Class-Based components were used to access those features.

In today’s post, we’ll learn what are React Hooks and will have a practical implementation of Hook useState. So, let’s get started.

We’ll Create a Simple Counter –

The simple counter doesn’t seem any complex, if we’d have to create it in our plain old HTML, JavaScript, we’d just have to hold the element and change the number by using the on-click event.

Also, we can try the same thing in React too, by just creating and variable & an on-click increment function as below.

let count = 0;
function increment() {
  count++;
  console.log(count);
}
ReactDOM.render(
  <div className="App">
    <h1>{count}</h1>
    <button onClick={increment} style={buttonStyle}>
      +
    </button>
  </div>,
  document.getElementById("root")
);

When you click on the button here, the count sure will be changed, but it won’t update in the h1 tag. If you check the console, you’ll get the increment value on every click.

The reason why h1 didn’t get updated is that it isn’t the HTML that you see, everything in React is JavaScript even those h1 tags. So to update the h1 value with the current code, we need to re-render the ReactDOM.render function on click, like this,

let count = 0;
function increment() {
  count++;
  ReactDOM.render(
    <div className="App">
      <h1>{count}</h1>
      <button onClick={increment} style={buttonStyle}>
        +
      </button>
    </div>,
    document.getElementById("root")
  );
}
ReactDOM.render(
  <div className="App">
    <h1>{count}</h1>
    <button onClick={increment} style={buttonStyle}>
      +
    </button>
  </div>,
  document.getElementById("root")
);

Now, the code sure will work, but it will re-render ReactDom which is not a better practice also it’s inefficient.

So, to avoid the re-rendering this is where Hooks comes up.

What is React Hook {useState}?

Instead of boring theory, let’s learn Hook practically.

To get started with React Hooks, we need to import useState from React. just like this,

import React, {useState} from "react"; at top of your App.js component.

Now, the only requirements of Hooks are that they should be inside a function. Let’s initialize the hook, inside the function App, add the below code,

const [count, setCount] = useState(0);

just like this.

import React, {useState} from "react";

export default function App() {
 const [count, setCount] = useState(0);
  function increment() {
    setCount(count + 1);
  }
  return (
    <div className="App">
      <h1>{count}</h1>
      <button
       onClick={increment}
       style={buttonStyle}
      >+</button>
    </div>
  );
}

Here, we are De-structuring the useState() using, count & setCount. Also, using state with the initial value as Number 0. This initial value is grabbed by the count variable, and the setCount will act as a function to update that count variable.

Inside the function increment, setCount(count + 1);, we are updating the count value on every click to +1. This code is far more efficient than re-rendering the whole component.

So, what useState basically doing is updating the particular element when the state value gets changed, without re-rendering the whole component.

I hope this post was helpful, if it was, make sure to follow our Coding Master newsletter for more interesting web development posts!

Pawan Sargar
Follow him
Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *