What even are Hooks?

React to me is a great framework for building seamless single page web applications. It has many built in features that allow developers to write their applications in many ways to achieve similar results. Its got all kinds of special sauce laced throughout the framework. Some of that special sauce comes from Hooks!

Basically, hooks allow you to use state and life cycle components without creating new classes. It’s just another way to write the component! Let’s take a look at the most common hooks.

The state hook is probably the most common hook to be used. Instead of creating a new class and declaring your state inside that class, you can use the useState hook. In this example I have created a counter and am utilizing the useState hook to store the value of the counter.

As you can see I didn’t declare a class, instead its just being called in a function component. You declare it like a variable, and in the brackets you declare the name of the variable that is actually storing the data and the function that will be used to manipulate that state. On the other side you simply declare the useState hook and the initial value. You can see lower on some arrow functions in which we use the declared function to change the state.

It’s as easy as that! Next time I will dive into the Effect hook which utilizes component life cycle so stay tuned!