Using the State Hook | Tutorial for Beginners

Using the State Hook | Tutorial for Beginners

In short Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

React Hooks were introduced at React Conf October 2018 as a way to use state and side-effects in React function components. Whereas function components have been called functional stateless components (FSC) before, they are finally able to use state with React Hooks. Therefore, many people refer to them as function components now.

In short Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

In this article, we look into the React State Hook.

The State Hook

This is the most commonly used of all the built-in hooks. This is similar to this.setState, we use it to set the state of our app.
Initially, with ES6 class, we set state like this using setState:

class LoginComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: ''
        }
    }
    login() {
        axios.post('/api/login/', this.state).then((v) => {
            // ...
        }, (err) => {
            // ...
        })
    }
    render() {
        return (
            <div>
                <form>
                    <input id='username' onInput={()=>this.setState({username: this.value})} />
                    <input id='password' onInput={()=>this.setState({password: this.value})} />
                    <button onClick={()=>this.login()}>Login</button>
                </form>
            </div>
        );
    }
}


This how we define components our React apps. The props hold the inputs to the component: <LoginComponent show='true' dismiss='false' />. this.state holds the state of the component. In the this.state, it has username property, which holds the username of the user and the password property which holds the password of the user. When the user enters somethign into the inputs tag, the setState() function call is used to update the statethis.state with the current username and password.

Using hooks, the above could be done like this:


// login.component.js
import { useState } from 'react'
function handleLogin(login) {
        axios.post('/api/login/', login).then((v) => {
            // ...
        }, (err) => {
            // ...
        })
}
function LoginComponent() {
    const [loginDetails, setLoginDetails] = useState({username: '', password: ''})
    return (
            <div>
                <form>
                    <input id='username' onInput={()=>setLoginDetails({username: this.value})} />
                    <input id='password' onInput={()=>setLoginDetails({password: this.value})} />
                    <button onClick={()=>handleLogin(loginDetails)}>Login</button>
                </form>
            </div>        
    );
}

This is the equivalent of our ES6 LoginComponent class. This kind of component defined in a function is known as a stateless component, but with the arrival of Hooks, it is now possible for this stateless component to have their own states. With that, they are now called functional components.

This LoginComponent is a functional component. When we input a value in the input boxes it sets the values in the loginDetails.

The new thing here is the useState function. Let’s talk about it:

The useState is the Hook(the state hook) like we said earlier state hooks allow us to manipulate the state of our component. The useState accepts the initial state of the component as a parameter. Like in our app useState({username: '', password: ''}), the initial state is

{ username: '', password: '' }


We set our initial username and password to be empty strings, so when the user enter his username/password we store it in their respective fields above. If we had done this useState({username: 'nnamdi', password: '123456'}), then the current state will be:

{username: 'nano', password: '123456'}


We can now have a general function of the useState hook with resp. to the parameters like this:

useState(initialState)


So, pass your initial state to useState function is synonymous to doing this:

// ...
class LoginComponent extends React.Component {
    constructor() {
        this.state = {
            username: "",
            password: ""
        }
    }
    // ...
}

in ES6 component classes.
Note: The difference here is that states in this.state are stored in objects but not so in using useState. For example, if you have a component with a single integer age as a state. Using ES6 component classes, it will be represented like this:


class IntComponent extends React.Component {
    construcor() {
        this.state = {
            age: 0
        }
    }
}

Accessed and manipulated like this:


class IntComponent extends React.Component {
    // ...
    render() {
        return (
            <div>
                My age is: {this.state.age}
                <button onClick={()=>this.setState(age: this.state.age + 1)}>
                    Increment Age
                </button>
            </div>
        );
    }
}

But using the state hook, you simply pass the state age value directly:


function IntComponent () {
    const [age,setAge] = useState(0)
    // ...
}

The state here doesn’t have to be an object — although it can be if you want.
The useState returns a pair: the current state and the function that lets us update the current state.

const [loginDetails, setLoginDetails] = useState({username: '', password: ''})


Here, the loginDetails is the current state and setLoginDetails is the function that will update the state loginDetails. Since we passed {username: '', password: ''} to useState, loginDetails will be {username: '', password: ''} for the initial render. Actually, useState returns an array, the first in the array is the initial state and the last is the update function, here we destructured loginDetails and setLoginDetails from the returned array.

const stateAndUpdateFn = useState({username: '', password: ''})
const loginDetails = stateAndUpdateFn[0]
const setLoginDetails = stateAndUpdateFn[1]
// OR
const [loginDetails, setLoginDetails] = useState({username: '', password: ''})

Updating our general useState function:


const [initialState, setState] = useState(initialState)
`initialState` is the initial state of the component
`setState` is the function that updates the initialState

Updating State

Looking at our two examples,
LoginComponent


function LoginComponent() {
    const [loginDetails, setLoginDetails] = useState({username: '', password: ''})
    return (
            <div>
                <form>
                    <input id='username' onInput={()=>setLoginDetails({username: this.value})} />
                    <input id='password' onInput={()=>setLoginDetails({password: this.value})} />
                    <button onClick={()=>handleLogin(loginDetails)}>Login</button>
                </form>
            </div>        
    );
}

We used the setLoginDetails (the second returned value form the useState(…) call) to update the state {username:’’,password:’’}.
Whenever the user enters something in the input boxes, the inputChange event calls the setLoginDetails, this updates loginDetails. If the user entered:

for username => `Vnano`
for password => `957025`

loginDetails will be {username: ‘Vnano’, password: ‘957025’}
In the IntComponent example,

function IntComponent () {
    const [age,setAge] = useState(0)
    render() {
        return (
            <div>
                My age is: {age}
                <button onClick={()=>setAge(age + 1)}>
                    Increment Age
                </button>
            </div>
        );
}

When the button is clicked the setAge increments the age by one.
Notice in the examples how we don’t append this. (like we always do in ES6 classes) both to the state and to the update function. That's one cool reason to use Hooks :).
Of course, you must call the update function with the same type as your state.

Multiple State Variables

We can have multiple state variables in our function components.
To demonstrate, we can modify our LoginComponent to manage the username and password states differently:

function LoginCoponent() {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    // ...
}

See, we called the useState twice in the same component. We can now independently manage each state.


function LoginCoponent() {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    // ...
    return (
            <div>
                <form>
                    <input id='username' onInput={()=>setUsername(event.target.value)} />
                    <input id='password' onInput={()=>setPassword(event.target.value)} />
                    <button onClick={()=>handleLogin(username, password)}>Login</button>
                </form>
            </div>        
    );
}

Functional Updates

We have only been passing state values to our update function. We can also update our state by passing a function to the update function.
Using our LoginComponent, let’s say we want


function LoginCoponent() {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    // ...
    return (
            <div>
                <form>
                    <input id='username' onInput={()=>setUsername(event.target.value)} />
                    <input id='password' onInput={()=>setPassword(event.target.value)} />
                    <button onClick={()=>handleLogin(username, password)}>Login</button>
                    <button onClick={()=>setUsername(prevUsername => prevUsername + '-vboy')}>Set Username to vboy</button>
                </form>
            </div>        
    );
}

This is quite fancy, but it explains it.
We added a button to append -vboy to the username. See, the setUsername takes a function prevUsername => prevUsername + '-vboy'. The prevUsername maps to the previous value of username. The function accepts it as an argument and appends s -dinho to it.
If our previous username is vnano, clicking on the button will call the function with vnano, the returned string vnano-vboy will be the current state.

Better example will be to increment and decrement:


function IntComponent () {
    const [age,setAge] = useState(0)
    render() {
        return (
            <div>
                My age is: {age}
                <button onClick={()=>setAge(prevAge=> prevAge+ 1)}>
                    Increment Age
                </button>
                <button onClick={()=>setAge(prevAge=> prevAge - 1)}>
                    Decrement Age
                </button>
            </div>
        );
}

Lazy Initialization

Expensive initialization can cost us severely and it may lead to a bad user experience. To overcome this is to use lazy initialization. What is lazy initialization?
This is a tactic of delaying the creation of value to an identifier or object until the first time it’s needed. If the process is expensive we don’t dont initialized it immediately to avoid lag on the user’s experience. Then, when it is needed by the user it is created.

Hooks offers us the tactic of lazy initialization. If the initial state is an expensive computation. Instead of calculating the state directly and passing it to the useState:

// longOperation takes 30ms to complete
const [initialState, setState] = useState(longOperation())

We can pass a function instead, which will execute on the initial render:


// longOperation takes 30ms to complete
const [initialState, setState] = useState(()=>longOperation())

On subsequent re-renders, the longOperation is not called.

Merging Update Objects

React Hooks doesn’t merge the previous state with the current state of a component. They only return the current state and discard the previous state.
Now, how do we make use of the old state if we want to or how do we merge the two states? Remember, when we pass a function to useState it accepts an argument which is the previous state of our component. With this we can merge the states like this:


const [initialstate, setState] = useState((prevState) => {
    return {...prevState, initialState}
})

Conclusion

On this page we’ve learned about one of the Hooks provided by React, called useState. We’re also sometimes going to refer to it as the “State Hook”. It lets us add local state to React function components — which we did for the first time ever!

We also learned a little bit more about what Hooks are. Hooks are functions that let you “hook into” React features from function components. Their names always start with use, and there are more Hooks we haven’t seen yet.

Learn More

How to create reusable React components with React Hooks?

How to create reusable React components with React Hooks?

In this React components tutorial, we learn how to create reusable React components with React Hooks. Building reusable UI components with React Hooks. We’ll use Hooks for managing and manipulating state data.

In React, a reusable component is a piece of UI that can be used in various parts of an application to build more than one UI instance. For instance, we can have a button component display with different colors in several parts of our application. Although it is the same button component when we provide it with a dataset (e.g color, or a function), it modifies itself and outputs a UI instance of the element.

This pattern of creating React components is necessary for scaling. It helps save time by ensuring less code is written, development is faster, the codebase is simpler, and maintenance is stress-free.

In this tutorial, we will build reusable React components that can be used throughout your projects to maintain consistency in logic and presentation. We’ll use Hooks for managing and manipulating state data.

This post assumes you that you have a basic understanding of React. If you don’t have any experience using React, you can refer to the documentation here to get started.

Getting started

In this part of the tutorial, we will create various HTML elements as reusable components. We’ll be using CodeSandbox. You can create a new sandbox to get started:

Input component

One advantage of creating a reusable input component is that you maintain the appearance of the input in various parts of your application. You can also determine what type of input component should be rendered (text, email, etc) by passing it a prop. Although we won’t go deep into styling in this tutorial, you can customize your components to suit your visual needs.

In your newly created sandbox project, create a components folder with a FormInput.js file and add the following code to it:

// ./components/FormInput.js
import React, {useState} from "react";

function FormInput(props) {
  const [inputType] = useState(props.type)
  const [inputValue, setInputValue] = useState('')

  function handleChange(event){
    setInputValue(event.target.value);
    if(props.onChange) props.onChange(inputValue)
  }
  return (
    <>
      <input type={inputType} value={inputValue} name="input-form" onChange={handleChange} class="inputclass"/>
    </>
  );
}
export default TextInput;

For a component to be reusable, it has to take in data or data sets (via props) and return an output (usually through a function passed via props). It is recommended that mutable state should be kept in the state property of a component to ensure they work correctly.

The FormInput() component above receives an input type to determine what type of input element to render (email, text, etc). It also takes in a method onChange() to receive the value sent back out from the input.

The component manages its value locally, and only returns the updated state value to the component it is called from.

To achieve this, we created a local function handleChange(). The function checks if a method to receive the state data is available via props then sends the current state data to it for further processing.

Custom select component

In your components folder, create a CustomSelect.js file and add the following code to it:

// ./components/CustomSelect.js
import React, { useState } from "react";
function CustomSelect(props) {
  const [data] = useState(props.data);
  const [selectedData, updateSelectedData] = useState("");
  function handleChange(event) {
    updateSelectedData(event.target.value);
    if (props.onSelectChange) props.onSelectChange(selectedData);
  }
  let options = data.map(data => (
    <option key={data.id} value={data.id}>
      {data.name}
    </option>
  ));
  return (
    <select
      name="customSearch"
      className="custom-search-select"
      onChange={handleChange}
    >
      <option>Select Item</option>
      {options}
    </select>
  );
}
export default CustomSelect;

Above, we receive the data set needed for the options tag in the select element via props. To build the option tags, we looped through the data set via props to construct it before rendering it as part of the select tag.

The state of the tag (the currently selected option) is stored locally and updated and sent back as an output when it changes via our local function handleChange().

Button component

A reusable button can be used to display different color variants or sizes everywhere it is used in your application. In your components folder, create a Button.js file and add the following code to it:

// ./components/Button.js
import React, { useState } from "react";
function Button(props) {
  const [size] = useState(props.size);
  const [variant] = useState(props.variant);
  return (
    <button className={`btn-${variant} btn-${size}`}>{props.children}</button>
  );
}
export default Button;

Our button receives three properties via props. The variant (used to determine the button color), the size (lg, xs, sm) to determine the size of the button. We display the button content dynamically using React’s built-in children property (props.children).

Modal component

A modal component is suitable for sending alerts in your application. In your components folder, create a Modal.js file and add the following code to it:

// ./components/Modal.js
import React, { useState, useEffect } from "react";
function Modal(props) {
  const [message] = useState(props.message);
  const [show, setShow] = useState(props.show);
  useEffect(() => {
    setTimeout(() => {
      setShow(false);
    }, 3000);
  });
  return (
    <div className={show ? "modal display-block" : "modal display-none"}>
      <section className="modal-main">{message}</section>
    </div>
  );
}
export default Modal;

Our modal component does two things:

  • It receives a boolean value that determines if it pops up or not
  • It also receives the message to be displayed when it pops up

To close the modal, we’d need to set the show state to false. We can do that by calling a setTimeout() function in the [useEffect()](https://reactjs.org/docs/hooks-effect.html) hook after a few seconds.

Toggle component

A toggle component is used in situations where a true or false answer is necessary. It is an essential form component.

In your components folder, create a ToggleSwitch.js file and add the following code to it:

// ./components/ToggleSwitch.js
import React, { useState } from "react";
function ToggleSwitch(props) {
  const [checked, setChecked] = useState(props.defaultChecked);
  const [Text] = useState(props.Text);
  function onChange(e) {
    setChecked(e.target.value);
    if (props.onToggleChange) props.onToggleChange(checked);
  }
  return (
    <div className={"toggle toggle-switch"}>
      <input
        type="checkbox"
        name={props.Name}
        className="toggle-switch-checkbox"
        id={props.id}
        defaultChecked={checked}
        onChange={onChange}
      />
      {props.id ? (
        <label className="toggle-switch-label" htmlFor={props.id}>
          <span
            className={
              props.disabled
                ? "toggle-switch-inner toggle-switch-disabled"
                : "toggle-switch-inner"
            }
            data-yes={Text[0]}
            data-no={Text[1]}
          />
          <span
            className={
              props.disabled
                ? "toggle-switch-switch toggle-switch-disabled"
                : "toggle-switch-switch"
            }
          />
        </label>
      ) : null}
    </div>
  );
}
export default ToggleSwitch;

Our toggle component receives the following props:

  • ID (required): this is the ID that’s going to be passed to the checkbox input control. Without this, the component won’t render
  • Text (required): The Toggle Switch contains an array of two values, which signify the text for True and False
  • Name (optional): this will be label text of the checkbox input
  • onChange (optional): this will used to receive the returned data from the components
  • Checked (optional): this will be directly passed to the element to get its current state
  • Disabled (optional): this will be be used to set the state of the button

When it changes, we update the state and send the value to the event listener sent via props from the parent component.

Using the components

To use the components we just created, we need to render them from a parent component and pass the relevant data to them. Add the following to your index.js:

// ./index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import FormInput from "../components/FormInput.js";
import CustomSelect from "../components/CustomSelect.js";
import ToggleSwitch from "../components/ToggleSwitch.js";
import Button from "../components/Button.js";
import Modal from "../components/Modal.js";
import "./styles.css";
function App() {
  const data = [
    {
      id: "1",
      name: "One"
    },
    {
      id: "2",
      name: "Two"
    },
    {
      id: "3",
      name: "Three"
    },
    {
      id: "4",
      name: "Four"
    }
  ];
  function handleChange(event) {
    console.log(event.target.value);
  }
  function onSelectChange(event) {
    console.log(event.target.value);
  }
  function onToggleChange(event) {
    console.log(event.target.checked);
  }
  return (
    <div className="App">
      <form>
        <Modal show={true} message={"Hello"}>
          <p>THIS IS A MODAL</p>
        </Modal>
        <FormInput type={"text"} onChange={handleChange} />
        <FormInput type={"email"} onChange={handleChange} />
        <div>
          <CustomSelect data={data} onSelectChange={onSelectChange} />
        </div>
        <div>
          <ToggleSwitch
            id="id"
            defaultChecked={false}
            disabled={false}
            Text={["Yes", "No"]}
            onToggleChange={onToggleChange}
          />
        </div>
        <Button variant="danger" size={"sm"} >Small Button</Button>
        <Button variant="primary" size={"lg"} >Smaller Button</Button>
        <Button variant="warning" size={"xs"} >Big Button</Button>
      </form>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

And you should see the following:

Conclusion

In this tutorial, we learned how to create reusable React components. This knowledge can be applied to create highly scalable and consistent React applications. We also worked with Hooks to manage and manipulate state data. You can find all the code samples used in this post in the this CodeSandbox project:

To read more about Hooks and React components check out the docs here.

Getting Started with React Native in 2020: Build Your First App

Getting Started with React Native in 2020: Build Your First App

Getting Started with React Native in 2020: Build Your First App. How To Code Your First Mobile App Using React Native. Learn how to build your first React Native app with important basic concepts. Learn the basics of React Native, a JavaScript Native Mobile App compiler. We look into components, events, props and passing them and more.

How To Code Your First Mobile App Using React Native

Learn how to build your first React Native app with important basic concepts

Today we start off with the basics of React Native, a javascript native mobile app compiler. We look into components, events, props and passing them and more.

React Tutorial for Beginners - Learn React in 1 Hour

React Tutorial for Beginners - Learn React in 1 Hour

React Tutorial for Beginners - Learn React in 1 Hour. The quick guide to learn basic concepts and workflow of how to build React App. In this course you will learn React in 1 hour. You will learn what react does, you will learn how react works, you will learn views, components, state, routing, react lifecycle and much more.

React is not complicated as it seems and you can learn it quickly.

In this course you will learn React in 1 hour. This is not a code along and the styling is not important. The important things are - You will learn what react does, you will learn how react works, you will learn views, components, state, routing, react lifecycle and much more. You dont need 14 hours to learn react.

This course is 1 hour long and it will probably take you from 1 - 3 hours to finish it in a sense where you will understand what React does and how it works.