Using the State Hook in React: useState() Hook
What is a Hook?
A Hook is a special function that lets you “hook into” React features without writing a class.
For example: ‘useState’ is a Hook that lets you add React state to function components.
___________________
When would you use a Hook?
If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.
___________________
Function components in React
Function components in React look like this:
or like this:
Note: There are some special rules about where you can and can’t use Hooks within a component. You can read it in: Rules of using Hooks in React
___________________
useState() Hook
Syntax:
The ‘useState’ Hook returns a stateful value, and a function to update it.
During the initial render, the returned state(state) is the same as the value passed as the first argument(initialState).
The ‘setState’ function is used to update the ‘state’. It accepts a new ‘state’ value and enqueues a re-render of the component:
During subsequent re-renders, the first value returned by ‘useState’ will always be the most recent state after applying updates.
___________________
Declaring a State Variable
First, we start by importing the ‘useState’ Hook from React:
Then we call the ‘useState’ Hook inside our function component:
We declare a state variable called ‘count’, and pass 0 to the useState() as initial state/value. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call ‘setCount’.
___________________
Using Multiple State Variables
Declaring state variables as a pair of:
[something, setSomething]
is also handy because it lets us give different names to different state variables if we want to use more than one:
In the above component, we have ‘age’, ‘fruit’, and ‘todos’ as local variables, and we can update them individually:
You don’t have to use many state variables. State variables can hold objects and arrays just fine, so you can still group related data together. However, unlike ‘this.setState’ in a class component, updating a state variable always replaces it instead of merging it.
___________________
What Do Square Brackets Mean?
You might have noticed the square brackets when we declare a state variable:
The names on the left aren’t a part of the React API. You can name your own state variables:
This JavaScript syntax is called “array destructuring”. It means that we’re making two new variables ‘fruit’ and ‘setFruit’, where ‘fruit’ is set to the first value returned by ‘useState’, and ‘setFruit’ is the second. It is equivalent to this code:
When we declare a state variable with ‘useState’, it returns a pair — an array with two items. The first item is the current value, and the second is a function that lets us update it. Using [0] and [1] to access them is a bit confusing because they have a specific meaning. This is why we use “array destructuring” instead.
___________________
Reading State
When we want to display the current ‘count’ in a class component, we read ‘this.state.count’:
In a function component, we can use ‘count’ directly:
___________________
Updating State
In a class component, we need to call ‘this.setState()’ to update the ‘count’ state:
In a function component, we already have ‘setCount’ and ‘count’ as variables so we don’t need ‘this’ keyword:
___________________
Recap
Let’s recap what we learned line by line and check our understanding:
- Line 1: We import the ‘useState’ Hook from React. It lets us keep local state in a function component.
- Line 4: Inside the ‘Example’ component, we declare a new state variable by calling the ‘useState’ Hook. It returns a pair of values, to which we give names. We’re calling our variable ‘count’ because it holds the number of button clicks. We initialize it to zero by passing 0 as the only ‘useState’ argument. The second returned item is itself a function. It lets us update the ‘count’ so we’ll name it ‘setCount’.
- Line 9: When the user clicks, we call ‘setCount’ with a new value. React will then re-render the ‘Example’ component, passing the new ‘count’ value to it.
___________________
References:
