State is on the Hook for Functional Components with React Hooks

As one of the most innovative and liked JavaScript frameworks, React is constantly changing to implement updates that are easier for developers to optimize their code. As of February 6, 2019 through version 16.8.0, React introduced hooks through releasing this update, which is what I’m going to be covering today.

To start off and to simplify things, the main idea of hooks is to create a way to use state and other React features without writing a class. What this means for developers is that rather than having to reformat their components in React, all they have to do is implement the new hooks syntax which is much quicker and looks cleaner.

Use useState

In order to illustrate what I am talking about, let me explain the differences between two component formats that I’m sure we’re all familiar with.

import React, { Component } from ‘react’;
class Dice extends Component {
render() { return (
               <div>
                  <ReactDice
                   numDice={1}
                   rollDone={this.rollDoneCallback}
                   ref={dice => this.reactDice = dice} 
                  />
               </div>
)}

Here we have a class component above and below we have a functional component.

import React from 'react'
export default function Dice() {
    return (
       <div>
         <ReactDice
         numDice={1}
         rollDone={rollDoneCallback}
         ref={dice => reactDice = dice}
        />
      </div> 
)}

There is currently no way to use state in this functional component unless we changed the second to look like the first by adding the correct keywords to format it that way, such as the words “class” and “render()”. This is where React hooks come in.

When using hooks, there is no need to use the correct keywords to reformat, instead the more simple hook syntax can be used. In this case, the appropriate React hook to use is the useState hook. This is what I was referring to in the title, because now state is “on the hook” for a functional component, a brand new concept for this version of React because functional components don’t use state initially.

Anyways if used the hook could format the functional component like so:

import React, {useState} from 'react'
export default function Dice() {
    const [number, findNumber] = useState(2);
//hook is being used right here
return (
       <div>
         <ReactDice
           onClick={() => findNumber(number + randomNumber)}
           numDice={1}
           rollDone={rollDoneCallback}
           ref={dice => reactDice = dice}
        />
      </div> 
)}

What is happening in the above code is that number is now a new state variable and represents the state. By default, the initial state could be set to 2 on the dice display. But either way, the state of the dice is always going to be represented by a number, so a number plus a randomNumber would be the new number on the dice to represent the change in the state. I should also mention that randomNumber could be a variable defined elsewhere, but that’s besides the point. To sum up, each time the ReactDice component is clicked, the findNumber function runs and uses the initial local state of 2 plus whatever randomNumber is to return the new number on the dice when someone rolls it.

Syntax for useState

The basic syntax for the useState is to use the hook name which is useState, useState( then put whatever argument represents its initial state here) and assign it to an array variable which has two parts.

const [number, findNumber] 
//const [new state variable name, function to update]

One is the new state variable name, which is the variable number and the other is a function that makes updating the dice number possible (findNumber). This function has to be called somewhere in the code in order to change the state and that’s why I have set it equal to an onClick event, which is going to change the number when someone clicks on it.

Other Hooks

There are a few more React hooks out there which can be used, including useEffect, which provides a way to do side effects like fetch requests after a page renders. Then there’s useContext which lets you pass data through your app without passing around props. And finally there is useReducer which gives developers a way to control state of multiple components using a reducer.

The main thing to recognize here is that hooks make our lives easier by simplifying how to manipulate our data which is why it is worth it to learn and implement how to use these functions because in reality that is all hooks really are; special kinds of functions.