Hooks are very important in react js and the most common hook is the useState Hook.

In this blog, we will look into the functionality of this hook and we will understand how this hook work.

useState() Hook

useState hook is used to manage dynamic values of variables, basically, it is used to manage state.

So if you want to change the value of a variable on a button click or any other events we use the useState hook.

Let’s understand with an example.

In our app.js file, we are adding an input field and button, On click of this button, we are changing the value of the inputText variable, which we have already declared in our app function.

import style from './App.module.css';
function App() {
  let inputText = 'Simple Variable';
  let submitValue = () =>{
    inputText='Variable Change';
    console.log(inputText);
  }
  return (
    <div>
      <input type="text" value={inputText}/>
      <button onClick={submitValue}>Click</button>
    </div>
  );
}
export default App;

In this method or function, we are changing the value of the inputText variable, On button click, we are calling the submitValue function which is updating the value of the inputText variable and outputting inside the console.

So according to normal javascript, it should be changed and updated on the input field value as well, but what is happening is, it is updating in the console but not updating in the input field value, react js doesn’t work like this, we have to manage its state to update it dynamically on input filed value as well.

Let’s see the output for the above code.

In the above output, you can see on the click of the button input field value didn’t change, but in the console, it gets updated.

So this is the problem with normal javascript variables in react js, to manage these states in react app we use the useState hook.

Now let’s see what happens when we use the useState hook in the same example.

So first we need to import the useState hook inside our App.js file then we can assign this inputText variable to useState hook.

import { useState } from 'react';
import style from './App.module.css';
function App() {
  let [inputText,setInputText] = useState('Simple Variable');
  let submitValue = () =>{
    setInputText('Variable Changed');
    console.log(inputText);
  }
  return (
    <div>
      <input type="text" value={inputText}/>
      <button onClick={submitValue}>Click</button>
    </div>
  );
}
export default App;

As you can see now, we are declaring the inputText variable and using the useState hook to manage its state, setInputText is a function that is responsible to change the state of the inputText variable, so inside the submitValue function, we are setting the setInputText value to “Variable Changed”, which automatically assign it to inputText variable and will reflect the output in console and input field value as well.

Output for the above code is shown below

If you like this blog please comment and share.