useState Hook: A Closer Look

As we have seen in the previous chapter, useState is the way to provide state to our functional components, similar to this.state and setState() in a class-based component.

As we already know, the state is always an object in classes. However, in Hooks, the state can be of any datatype. We used the useState hook in the previous chapter with primitive values such as number and Boolean. This introduces several complications later on when we rely on datatypes that are modified in a different way to primitive types, such as arrays or objects.

The first complication arises when we use setter functions with arrays, so let's explore that first.

Setter Functions on Arrays

We have already become comfortable with using setter functions when using the useState hook in the previous chapter. As a refresher, let's return to the setter function for a while; the second argument of the useState array. We can pass a value directly to the setter...