State in React

State. What exactly is state?

Props and state are similar, but share some differences. Props, or properties, get passed down to the component and are immutable, meaning they cannot be changed once they are declared. State is mutable, therefore, it can be modified, which is the reason we would use state rather than props. State is used for when we need the data to change, AKA when we need the State to change.

In order to set initial State, we first need to define it like this…

const [ counter , setCounter ] = useState(0)

When useState is called, it will return an array that has two variables in it. In this code snippet, the first variable returned is counter. Counter is a reference to the current value of that state in React’s internals. The second variable in the array for this example is setCounter, which is a setter function so we can update that state. In the parenthesis after useState in the example, I have it taking in “0". This is just setting the initial value of State to “0”. This could be any form of data such as an integer, string, array, and so forth.

We could also define State like this…

But React recommends using array destructuring to clean up the code a bit.

The “setter” function we get back from calling state does what it says. It sets and updates state. Whenever the “setter” function is called, in this case, setCounter, it allows us to update the state. For example…

const handleClick = event => { setCounter( counter + 1 ) }

Whenever state is changed, React automatically re-renders the component that the changed state is in and all of its subsequent children. Re-rendering allows the page to refresh and update to the latest data received.

Updating state based on the previous state is important in order to make sure the state knows exactly what it needs to update. Take this example for instance…

const incrementFive = () => {

for( let i = 0; i < 5; i++ ) {

setCount(count + 1)}

}

<button onClick = {incrementFive} > Increment 5 </button>

You would think that this would work, right? Wrong. It would only increment the count by one. Inorder for us to get this to work, we need to pass in a function that has access to the previous state, and increment that value by 5 like this…

const incrementFive = () => {

for( let i = 0; i < 5; i++ ) {

setCount(prevCount => prevCount + 1)}

}

<button onClick = {incrementFive} > Increment 5 </button>

The reason we update state based off of previous state is because useState works asynchronously. As demonstrated above, the state isn’t update in a synchronous way. In order to fix this, we have to pass in a callback function. The function called inside of the setCount will be passed the state variable from when that setCount was called. When we use the callback function, React will pass in the current value of count before it is updated.

In order to change state we need to change it with a function. Why don’t we just directly change the state by saying maybe…

count = 1

This isn’t the correct way because it won't re-render. When you update state, it causes a re-render of the page. By calling the function returned by setState, it allows for the component to re-render.

What’s the difference between setting state in a functional component vs a class component?

Functional Component:

All of the above examples have been in a functional component. You have to define state like…

const [ counter , setCounter ] = useState(0)

And then create a function that updates the state like…

const handleClick = event => { setCount(counter + 1) }

Class components are similar, but do have some key differences.

Class Component:

In class components, you can’t use hooks, so we have to add a property called state to our component instance like this…

In a functional component, to set state we would call a function like setCount, but in class components that doesn't exist. Instead, we use this.setState. When we use this.setState we pass in an object like…

When we update the state, this.setState only needs the keys of the values it is going to update. There is no need to use a spread operator because React merges the object you provide into the current state.

State is a way to update the data in your application. With props, they are immutable, which means they cannot change, but with State, it is mutable therefore it can change and we can have more interactivity with our applications.