What Is UseState?

UseState is a react hook that allows objects to change states. There are many ways to do so, for example, using strings, numbers, arrays, booleans, and more. Many uses for usestate can vary from displaying temporary information, switching text states or displaying text on an action (button click, etc.).

Example

SetUp

For your setup, we are going to create a project using the npx create-react-app usestate, and after entering this command into you're prompt, you will be greeted with your final setup. Once you open it up in VisualStudioCode, you'll notice that there are a lot of files, so let's do a cleanup.

The final file setup should look like this. Make sure that you clean up all the code inside of App.js and index.js.

In your index.js, your final code should look like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Now that you have finished your setup, we can continue to the core of the code

UseState Code

Now that the setup is out of the way, we can continue to where the magic happens. In App.js, we are going to want to create a div and put any name in there. For example, I will be using John as my subject.


function App() {
  }
  return (
    <div>
      John
    </div>
  );
}
export default App;

If you haven't done so, start up your React app in your browser. In the browser, you will see your text on the screen. For example, John in mine:

The next thing that we are going to want to do is import useState from react. By doing so, just type in this code at the top:

import { useState } from 'react'

Finally, we can play around with this react hook. But first, let me show you the difference between useState and trying to set it without useState. In your App.js, add a button under your text in the same div and name it clickme. Now add an onClick function to your button and add the arrow function under the app.js function.


import { useState } from 'react';

function App() {
  const FireEvent= () => {

  }
  return (
    <div>
     John
     <button onClick={FireEvent}>clickme</button>
    </div>
  );
}

export default App;

This onClick function will be called FireEvent. Now, if you try to do this without useState, it will not work.

Without UseState

Let me show you. Add a let, name it name, and assign it to the name of John. So instead of having the static John in the div tags, put curly braces around it and put name instead:

import { useState } from 'react';

function App() {
  let name = 'John'
  const FireEvent= () => {

  }
  return (
    <div>
     {name}
     <button onClick={FireEvent}>clickme</button>
    </div>
  );
}

export default App;

Then, inside of FireEvent, add name is equal to 'Michael' or any other text you want.

const FireEvent= () => {
    name = "Michael"
  }

Now if you go and run the code, you will see that when you press the button, it doesn't change. Instead, the name isn't being displayed to the user and is being overridden by the default name. To prove the name is being changed, add a console.log(name) inside of the FireEvent function.

import { useState } from 'react';

function App() {
  let name = 'John'
  const FireEvent= () => {
    name = 'Michael'
    console.log(name)
  }
  return (
    <div>
     {name}
     <button onClick={FireEvent}>clickme</button>
    </div>
  );
}

export default App;

When you press the button now, inside of the console, you will see the text is being outputted

As you can see here, Michael is being displayed.

With UseState

Now that I have shown you what happens without useState when trying to change text states, we can look at the process with the help of the react hook, useState.

The first step in converting the code over is that we need to get rid of the let. Instead of this, we will replace it with a const, and instead of setting it to one name, we can have an array of names. In this example, we will be using name and setName.

const [name, setName] = useState('John')

Then we can use the useState hook and set it to the name of John. Essentially, John is taking the value of name, and we can change it through the use of setName.

Now all we have to do is get rid of the code inside of the FireEvent and change it to setName('Michael').

const FireEvent= () => {
    setName('Micheal')
  }

The final code for this example should be:

import { useState } from 'react';

function App() {
  const [name, setName] = useState('John')
  const FireEvent= () => {
    setName('Micheal')
  }
  return (
    <div>
     {name}
     <button onClick={FireEvent}>clickme</button>
    </div>
  );
}

export default App;

And there you have it. As a result, when you press the button your text should switch like this:

Conclusion

In conclusion, you should have an app that, at the click of a button, your text should change. I hope you understood the fundamental way to use useState in its prime.

Qasim's Blog