During my time learning React, I had to spend some quality time with state. State is dynamic data that we can use in our components. State can be useful when it comes to controlling components. State is different from props as props are read-only and can not be modified, whereas state can be modified.
In order to use state, we must first useState.
Before we get started, ensure that you have imported the useState hook. This is a special function called a React Hook that will allow us to access React’s internal state inside of our component.
useState returns an array with two variables: a reference to the current value and a setter function.
Now, we will use array destructuring to create the two variables that useState returns.
We can see here that we have a variable, readerConfused, that tells us the current value of our state is true. We then have a setter function, setConfusion, that will allow us to update our state.
We use state whenever we want our data to change when a user interacts with our app.
Let’s say we want our state to change when a user clicks a button.
Our button has a click event listener that calls on the handleClick function. It also displays text based on if readerConfused is true or false. If readerConfused is true, the user will be prompted to click the button to no longer be confused. If readerConfused is false, the user will be prompted to click the button and be confused again.
Our setter function will cause our component to re-render.
On click, we use our setter function to set the readerConfused value to whatever the opposite of that value is. For example, if readerConfused is true, !readerConfused is false, thus our setter function updates readerConfused to false. Using our setter function causes our component to re-render, thus updating the text in our button to the appropriate text.
Another example of using state
Here, our count’s initial value is set to 0. When a user clicks the button, we use our setter function, setCount, to increase our count by 1. This re-renders our button component to the current value of count. We can click on this button as many times as we’d like, and it will continue to increment and re-render our button.
A few rules and tips for state
React will only update state if a new object/array is passed in to setState, so…
- When adding an item to an array in state, use the spread operator
- When removing an item from an array in state, use filter
- When updating an item in an array, use map
setState is asynchronous. If you need to set state based on the current value of state, it is best practice to use callback syntax.
Only call hooks at the top level. Aka, don’t call hooks inside loops, conditions, or nested functions.
Only call hooks from React Functions, not regular JS functions.
Top comments (0)