React Hooks: Everything about useState
Everything you need to know to start working with Hooks in React.
With the advent of React v 16.7.0, a new feature came along with it, it is called Hook. This enables us to plug into our React apps to access features like the state of our app and other niceties like the lifecycle hooks: componentDidMount, componentDidUpdate and componentDidUnmount from our function Components without using ES6 class.
In this article, we look into the React State Hook.
Tip: Use Bit to organize React components (and hooks) as a reusable collection your team can easily share and use in your projects- to build faster. Give it a try (see example hooks collection at the end):
The State Hook — useState
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: '1234'}), then the current state will be:
{username: 'nnamdi', password: '1234'}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]// ORconst [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 => `Nnamdi`
for password => `908765`loginDetails will be {username: ‘Nnamdi’, password: ‘908765’}
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 + '-dinho')}>Set Username to dinho</button>
</form>
</div>
);
}
This is quite fancy, but it explains it.
We added a button to append -dinho to the username. See, the setUsername takes a function prevUsername => prevUsername + '-dinho'. 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 nnamdi, clicking on the button will call the function with nnamdi, the returned string nnamdi-dinho 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. The best bet 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}
})Benefits of React Hooks
- We can do away with ES6 classes
- Isolate stateful logic
- It lets you split a component into smaller functions based on relatedness.
- Easier to test
- Forces you to separate your app’s logic based on concerns
- Reuse for stateful logic between functions without affecting your component hierarchy.
Conclusion
In this article, we looked deep into the React state hook. We saw many facets of the React state hook. It might not be comprehensive at first, but with time you will get the hang of it.
In our next installment of the series, we will look at the Effects Hooks — it is one of the most useful Hooks provided to us by React. It enables us to manipulate the lifecycle of our React app from componentdidMount to componentWillUnmount. When we get there we will know it more.
If you have any question regarding this or anything I should add, correct or remove, feel free to comment and ask me anything! Thanks for reading.
- Here’s a useful collection of React hooks you can use:
