Abhinav Anshul
26 Nov 2021
β’
5 min read
Hi π
In this article, we will deep dive into the world of React hooks, useState
in particular from a beginner's point of view.
React Hooks are the result of a continuous rise in functional programming over the years.
We will have a look at its working, common mistakes we are likely to encounter, comparing it with class-based components and best practices.
useState is a React Hook introduced late in October 2018, which allows us to have state variables in the JSX functional component. we pass an initial value to this function, and it returns a variable with a new state based on functional logic.
Let's go through the following topic one-by-one:
Hmm, an interesting question!
As we stated earlier, the useState hook allows us to have state variables in the JSX functional component.
It takes one argument which is the initial state
and returns a state value and a function to update it.
useState is a named export from React, So, we can either do
import { useState } from 'react'
or simply,
React.useState
The former approach is much common across codebases and mentioned in the official react docs
It's always a good idea to try things out ourselves rather than reading documentation, so let's jump right into the code.
We'll build a counter application and to keep things simpler, we won't go into prevState (yet), see point 7(ii)
As we can see, we are importing the useState
hook at top of the file, and a handful of CSS styles to keep things centered and clean enough.
Moving further, we have a functional JSX component called App
, which is rendering increment and decrement buttons and a count
text in between. This count will render every time the state gets updated by the button clicks.
The useState hook takes an initial state, count
in this case, and returns a pair of variables, count
and setCount
, where count
is the current state (currently set to 0) whereas setCount
is a function which updates it asynchronously.
At line number 6
, we are using array destructuring to return the pair of variables at array index of 0 & 1.
(Read more about array destructuring here)
Moving on, both the button has an onClick
event, which triggers an anonymous function, which increments or decrements the count variable using the setCount
function. This click even results in the re-rendering of the count
state.
Similar to the count
state variable, we are allowed to use different data types such as objects, arrays, strings, boolean, etc.
const [firstname, setFirstname] = useState("")
const [age, setAge] = useState(0)
const [isLoggedin, setIsLoggedin] = useState(false)
const [form, setForm] = useState({
username : "",
password : ""
})
As we can see, all the above useState hooks are valid state data types.
While the useState
hook is a new addition to the React library, it somewhat does the same thing as this.state
used with class-based components.
Confused?
Let's see how we would write the same counter app in a class
based component.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// change code below this line
increment() {
this.setState({
count: this.state.count + 1
});
};
decrement() {
this.setState({
count: this.state.count - 1
});
};
render() {
return (
<div>
<button className='inc' onClick={(e) => this.increment(e)}>Increment!</button>
<button className='dec' onClick={(e) => this.decrement(e)}>Decrement!</button>
<h1>Current Count: {this.state.count}</h1>
</div>
);
}
};
Oh! what if we have multiple states to handle and not just a silly count variable, what about then? Where do we store those variables? Are they similar to this.state
?
Well, handling of multiple state variables is somewhat different in useState compared to this.state
In useState, we tend to write as many state hooks as there are states
Like this,
const [lastname, setLastname] = useState(null)
const [firstname, setFirstname] = useState(null)
const [age, setAge] = useState(0)
Or group similar things together using an initial state object
const [islogin, setIslogin] = useState({
username : "",
password : ""
})
However, when building quite a large application it is incredibly difficult to keep track of all the useState hooks and is not very practical, hence useReducer comes into the picture, which is beyond the scope of this article. Read more about useReducer here
i. We can only use useState
(or any other hook) inside a function component.
ii. React Hooks must be called in the same order in every component render, in simpler words, any hook should be at the very top and inside the function component without any unnecessary check, loops, etc For example, the following code is wrong, and won't behave as we expect
function App(){
if(true){
const [count, setCount] = useState(0)
}
}
iii When we update the state, the component re-renders each time.
i. Never ever update the state directly, like this :
function incrementCount(){
count = count + 1
}
Instead, we have a function (remember setCount function?) that will manipulate the state variable as we need, Similar to this,
function incrementCount(){
setCount(count + 1)
}
Or, we can use an anonymous function
like how we used it in the first counter application.
ii. Remember, how we talked about, "Keeping things simpler" at the very beginning of this article, well, this is the moment!
In order to use useState effectively, we absolutely want to change and mutate the state variable based on its initial state
, and don't want unexpected rendering.
To do so, we need to pass a previous state parameter to the function and based on that, mutating the state variable.
Confused?
Okay, Let's see some code!
setCount(count + 1)
should be
setCount(prevState => prevState + 1)
Here, prevState
ensures us to give us current value of count
no matter what, and in fact a better and recommended way to write hooks!
i. Easier to test.
ii. Provides good readability.
iii. Performance boost.
iv. Reduction in bundle size.
Important Resources that I have collected over time π
i. https://medium.com/@quinnlashinsky/destructuring-arrays-in-javascript-2cb003160b3a
ii. https://levelup.gitconnected.com/react-hooks-gotchas-setstate-in-async-effects-d2fd84b02305
iii. https://www.youtube.com/watch?v=O6P86uwfdR0&t=221s&ab_channel=WebDevSimplified
Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ
108 E 16th Street, New York, NY 10003
Join over 111,000 others and get access to exclusive content, job opportunities and more!