React.js useState Hook

The useState hook is one of the most common and most essential hooks in React.

The useState hook takes one argument at a time, the initial state and it returns 2 values: the current state and a state case that can be assigned dynamically.

What is the useState Hook?

useState is a Hook that allows you to add state variables in functional components.

You pass the initial state to this hook and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value.

Its syntax is like so:

import { useState } from 'react';


const HooksExample = () => {
   const [ state, setState ] = useState('initialValue');

  return (
    // the values of the useState  hook can now be assigned here
  )
}

export default HooksExample

Let's go over the syntax briefly. First off, we have to import the useState hook from react. We import it inside curly braces because it is a named export.

I'll recommend that you go over some react tutorial so that you can grasp some concepts here.

In the introductory part of this series where I went over hooks generally, I mentioned that hooks can only be called at the top of a functional component: outside the return statement.

That's why we called it on top of the return statement, now how does this hook work

const [ state, setState ] = useState('initial value')
/*The names here are just for the sake of this tutorial, you can name them anything of your choice*/

What we're doing here is just assigning the variable 'state' to the value inside the useState function in this case, the initial value.

Now the setState variable can be used wherever we wish to update the value of the state variable in the Component.

Don't worry, we'll be going over an example to see how this really works.

useState Example

Let's say we want to update something like a number whenever we clicked on a button on our screen. Maybe increment the value.

In regular vanilla JavaScript, we simply give the button and text element a class or id and then and some sort of function and an onClick event that runs the function. And that's pretty much it.

In react, we do things quite differently, if we decide to do this using the same Vanilla JS idea, we'll be doing something like this.

const Increment = () => {
  const counter = 0;
  const increment = () => {
     counter = counter + 1
     console.log('counter
')
  }

  return (
    <>
      {counter}
      <button onClick = 
          {increment}
       > 
         Add
      <button/>
    </>
  )
}

export default IncrementExample;

In the normal sense, this should work, but somehow it doesn't. Why?

Let's go to our console and look at the value of counter. On every click, we see that it increases, but it doesn't increase in our application.

Don't worry, it's not a bug :-). React just hasn't updated the state of our application to reflect this change.

React re-renders an App and updates its state. And we've not told react to do so.

To solve this, we use the useState Hook. Here's how we implement it.

import { useState } from 'react';

const Increment = () => {
  // Here we initialize our Hooks and assign the count variable a value of 0
  const [ counter, setCounter ] = useState(0);
  // Now using the second parameter of our hook, we assign an updated state to our previous variable 
  const increment = () => {
     setCounter(counter+1)
  }

  return (
    <>
      {counter}
      <button onClick = 
          {increment}
       > 
         Add
      <button/>
    </>
  )
}

export default IncrementExample;

What's happening here? We're basically assigning the counter variable to the initial value in the useState parameter.

Then inside the increment function, we're updating the counter variable to reflect the change.

To wrap up, we use the useState hooks whenever we have a dynamic element that needs to be updated.

Although this isn't a fixed idea, you can check out this Freecodecamp's article to know when to use this hook.

It's quite easy to use and with some practice you should be able to properly grasp its methods and application.

I hope this helps you understand the fundamentals of the useState hooks.

Do leave a comment if you have any questions or suggestions.