React Hooks: Revisited
Make React Function Components Stateful with useState
For function components, the useState hook is how you make your component stateful. This replaces the previous convention from class components where values were stored in a this.state object and manipulated using this.setState().
The hook returns an array with two values: the state value your are storing and a function that allows you to updated it. When instantiating the hook, the initial state value is determined by whatever value you pass it.
const [value, setValue] = useState(null)
Ryan Harris: [0:00] Here, we have a partially functioning shopping cart that's intended to allow users to buy apples. However, the toggles don't work because we're not tracking any sort of state within this component. To make this work, we'll need to use the useState Hook, so let's import it from React, { useState }.
[0:18] Let's instantiate our first state, const. We're going to be destructuring array here. Our first value is apples, with the value we're keeping track of. The second will be setApples, which is a function that will allow us to modify the state. It's equal to useState, and we pass the initial value we want to set.
[0:40] Let's wire our CartItem component up to the state we just instantiated. We'll set the initial quantity to the value of apples, which when the component renders will be .
[0:52] Let's add another prop called add. This will be used to increment the state value every time we click the + toggle. We'll take the anonymous function, and that will call setApples or set our function from the state hook. We'll pass it the value of apples + 1. Now, when we click on the toggle, it increments our count.
[1:15] Let's also wire up the - toggle by adding the remove prop to our CartItem component. It takes an anonymous function. Inside, we'll say if (apples ≥ 1), then we should setApples(apples - 1). Now, if we increment our count and decrement it, it'll count down until we hit , at which point it will stop decrementing.
[1:49] In this case, we want to keep track of another state value called oranges, so we'll say const [oranges, setOranges] = useState(), and we'll pass it the initial value of .
[2:03] Now that we have another state instantiated, we can copy and paste this CartItem here. We'll say that. We'll change this to say Oranges. The quantity of this will be oranges as well, the value from our state hook. We'll use the setter function called setOranges when we want to increment. It'll be oranges + 1 instead of apples.
[2:27] The same down here for remove. We're looking at the oranges value. We're going to say setOranges to the count that we currently have -1. If we save that, you can see we now have two state values that are being tracked independently of one another.
[2:47] In conclusion, useState is what allows your function components to be stateful by providing you a value and a function to manipulate that value. It also isolates these unrelated states from one another and allows you to keep track of multiple within the same component.