Introduction to Hooks

In React, a component's state is some data that is tracked by React. Whenever the state changes, React automatically updates the associated component to reflect the new state.

Hooks are functions that allow us to connect to a component's state or lifecycle. With hooks, we can use states and other class component features in functional components, making the code cleaner and simpler. Therefore, we will focus on using functional components with Hooks for simplicity.

We will try to understand hooks by looking at the most basic example. There was a simple button example in the event handling chapter:

We will change it so that it counts the number of clicks.

For that, we create a new state variable called clicks and update the handleClick method to display the relevant text:

In the above code, we declared two constant terms, clicks and updateClicks, using the useState function clicks is the term that holds a value, and updateClicks is the function that is used for updating the value of clicks since it cannot be updated directly – it's a constant.

The neat thing about this is that whenever the value of clicks is changed, React re-renders the component so that we can see the changes.

Note that in the above code, we also imported ‘useState’ from the React module.

If you look at the above component, its output should be something like this:

If you click the button a few times, it should show the number of times it has been clicked. In the next chapter, we will explore how to use hooks in detail.