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;

styles.css

.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:

App.js

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:

App.js

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:

App.js

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.