Beginner’s Guide to React Hooks: useState
This article is the first in a series that will cover the basics of several React hooks. Before diving into the first, most elementary hook in the series, the useState hook, it’s important to understand what hooks are in general.
In October 2018, React introduced hooks as a solution for implementing state and side effects in React functional components. These features were previously available exclusively through the use of React class components. Functional components now have the tools required to “hook into” the React state and access their own version of life cycle functionality. Integrating hooks in React is advantageous for a programmer because it leads to simpler, cleaner, and less verbose code.
When using hooks, the official React documentation states two rules:
“Only Call Hooks at the Top Level”
When calling hooks inside a functional component, they must reside inside the body and not inside the return. The hook also must not live inside loops, conditional statements, or nested lower level functions. This specific placement ensures uniformity in the hook execution order after each component re-render, maintaining the state appropriately.
“Only Call Hooks from React Functions”
This is self-explanatory, but without importing React into a file, tools like JSX and React hooks would not work. The programmer needs to import React into the file in order for the file to leverage React capabilities.
The useState Hook
As mentioned before, hooks enable the programmer to use state in their functional components. If it wasn’t obvious enough, useState is the hook that enables state variables to exist in functional components. Without further ado, it’s time to learn about how useState() works.
const [state, setState] = useState(initialState)The use state function is initialized with an initial value, and returns an array containing two elements. The first element is a state variable. The second element is a function that updates the preceding state variable. Under best naming convention practices, the function that updates the state variable should match the state variable name, but prepend “set”. This function name should be camel-cased.
const [temperature, setTemperature] = useState(20)The example (above) initializes a temperature state variable with the value of 20. Whenever the setTemperature function is called, the programmer resets the value of the state variable temperature. Whenever setTemperature is called, the component is re-rendered. This behavior acts just like the setState() function used in React class components.
The following example will illustrate how to implement useState() in a simple React application.
In order to have access to React, and the useState portion of React, the programmer must explicitly import them into their application. Importing them is expressed as:
import React, { useState } from 'react'This application will use only one state variable, backgroundColor. This variable will correspond to the color of a box rendered in the browser. To start, the box color will be initialized to ‘white’.
const [backgroundColor, setBackgroundColor] = useState('white')With the intention of simplicity, this application will utilize inline styling to represent the background color of the box.
<div className="box" style={{backgroundColor: backgroundColor}}>
</div>Now that the initial backgroundColor is set, the application now needs a means of changing the backgroundColor using setBackgroundColor. To achieve this functionality, the application will contain seven different buttons corresponding to seven different colors in the rainbow. These colors are red, orange, yellow, green, blue, indigo, and violet. Each of these seven buttons will contain an onClick synthetic event that will receive a callback function. This callback function will invoke the setBackgroundColor() function, effectively setting the background color with its respective value.
<button onClick={() => setBackgroundColor('yellow')}>yellow</button>When the application user presses the yellow button, the onClick event triggers the setBackgroundColor function. Immediately after clicking this button, the application will re-render with the new color of the box (yellow). To see a demonstration of this application, scroll down to the GIF!
A demo of the application is provided (above). As you may have noticed, its usage is pretty straightforward. If you are new to hooks, try implementing them in your next application. Next week, we will take a deep dive into React’s useEffect hook. If you have any questions or comments, feel free to post them below!
Resources:
