Which Hooks Should We Know?

What are hooks, and why use them?

Stateless components are generally easier to write and test. They should be the go-to component of ReactJS developers, but they were often overlooked because they could not manage state. At the beginning of 2019, the ReactJS team added hooks to the library. Hooks add state functionality to stateless components (therefore, it is better to only use the term functional components). One specific hook called useState is a function that returns a stateful value and a function to update it.

Let’s go back to our example of a stateful component, change it to a functional one, and add the useState hook, as follows:

Click the “Run” button below to see it running successfully: