React js – useState hook

This post is a simple and easy tutorial to useState hook on React.

With hooks, it is possible to use state and other React features without writing a class. Hooks began included in React 16.8.0 version.

Let’s go to the exercise:

To not have to create a new application, I recommend using CodeStandBox to follow this tutorial.

We will only work with two files in our src folder: App.js and styles.css.

  • First of all, delete all content of your App.js and styles.css;
  • We will not talk about CSS in this post for it just copy and paste the CSS following content;
.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.text {
  font-weight: 300;
  font-size: 5rem;
}
.btn-add {
  border-radius: 25px;
  margin: 10px;
  padding: 15px 35px;
  border: none;
  outline: none;
  background-color: blue;
  font-size: 3rem;
  color: #fff;
}
.btn-take {
  border-radius: 25px;
  margin: 10px;
  padding: 15px 35px;
  border: none;
  outline: none;
  background-color: red;
  font-size: 3rem;
  color: #fff;
}
.reset {
  border-radius: 25px;
  margin: 10px;
  padding: 15px 35px;
  border: none;
  outline: none;
  background-color: #0092c3;
  font-size: 3rem;
  color: #fff;
}
  • In our App.js, let’s import our CSS and create the App function, returning one <h1> to the title:
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1 className="text">State Hook</h1>
    </div>
  );
}
  • Let’s import from React the useState hook that we can use inside our App function.
import React, { useState } from 'react';
  • Now we can call inside the App function the local state. This state will be called useState, then return a pair: the current state value and a function. In our example, the current state will call “count”, and the function to update the “count” will be called “setCount”. Will be easy to understand taking a look at the code. Let’s add a <span> to show the actual “count” on the screen:
import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1 className="text">State Hook</h1>
      <span className="text">{count}</span>
    </div>
  );
}
  • To use the “setCount” function to change the “count”, let’s create three buttons: one adds 1 to the “count”, one takes 1, and the last to reset. On <button> let’s write an arrow function to use the setCount, on onClick event, will be clear on code example:
import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1 className="text">State Hook</h1>
      <span className="text">{count}</span>
      <div>
        <button className="btn-add" onClick={() => setCount(count + 1)}>
          +1
        </button>
        <button className="btn-take" onClick={() => setCount(count - 1)}>
          -1
        </button>
      </div>
      <button className="reset" onClick={() => setCount(count - count)}>
        Reset
      </button>
    </div>
  );
}

It is what you will see on the screen:

Conclusion:

This post is one “Hello World” of State Hook on React application, but you can understand its concepts here. I will leave “code sandbox” links for you to explore.

Thank you for reading.

CodeSandBox

GitHub



3 responses to “React js – useState hook”

  1. Nice post. I learn something totally new and challenging on websites I stumbleupon on a daily basis. It will always be interesting to read through content from other writers and use something from their websites.

  2. Hi, Neat post. There is an issue along with your web site in internet explorer, would test this?K IE still is the market leader and a huge part of other people will omit your great writing because of this problem.

Leave a Reply

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