⚛️⚡️ Introduction to React Hooks

What are Hooks?

Let's start by understanding what Hooks are, Hooks are an innovation, a modification that the React team has made available to us since version 16.8

Hooks are basically a way to create components and create your application's features without creating entire classes with a lifecycle, constructors, defining various states, binding functions, and so on. Now with a simple variable we can create a complete and complex component with the use of Hooks, Hooks have come to change the way we code our features in order to use even less code and with more performance.

So, if we compare a component created using Hooks with a component created with classes, the one created with Hooks is infinitely smaller in terms of the amount of code, and this is very beneficial both for production time and for your productivity.

Anyway, Hooks are functions (which always start with the word use) that allow you to “connect” to React's state and lifecycle resources from functional components, and just to point out Hooks don't work inside classes.

Three important features about Hooks:

1. They only work on functional components.
2. They must always be invoked in the main scope of your component (for example outside ifs and functions).
3. And finally, they cannot be linked to any conditional to be executed.

React provides some built-in Hooks like useState (we'll see in the next post), but you can also create your own custom Hooks to reuse state behavior between different components.

Hope this article helped you to understand more about React Hooks