Using state Hooks

We have already learned about the useState Hook in previous chapters, but here we will look at it again and compare it against another state Hook we haven’t covered yet, useReducer. We will expand the PersonScore component we created in the last section to explore these state Hooks.

Using useState

As a reminder, the useState Hook allows state to be defined in a variable. The syntax for useState is as follows:

const [state, setState] = useState(initialState);

We will enhance the PersonScore component we created in the last section to store the person’s name in state. We will also have state for a score that is incremented, decremented, and reset using some buttons in the component. We will also add the loading state to the component, which will show a loading indicator when true.

Carry out the following steps:

1. Open PersonScore.tsx and add useState to the React import statement:

   import { useEffect, useState } from 'react&apos...