React Hooks

Introduction to React Hooks with using state in functional components.

React Hooks came with the react version 16.8 with usage of react state and other features of react in functional react components. Earlier we could only use state in react class component. If you are not aware of the react basics, then please read our article here — React Basics

Why react hooks? React came out with this hook feature because projects which were earlier implemented using functional component which is without state and when suddenly requirement comes in adding state to the stateless functional component it becomes difficult for the large projects to convert functional components into class components. While implementing class component we need to take care of the several things like class boilerplate code, ‘this’ keyword, event binding etc. and many more. Not only when we want to use state in functional components but lifecycle methods and other features of class now we can implement in function components.

Why the name is called react hooks? Because now react allows us to hook into different features of class components in functional component such as state.

In this tutorial we will discuss a feature of react hook called useState. In the next coming tutorial we will discuss other features.

Here we will see implementing a functional component and see that how functional components makes code clean and shorter as compared to class components using state.

In this example, let’s say we have a Cart component with a state called ‘totalAmount’ .

In the above code if you notice we have used a function ‘useState’. It returns an array with two values which we can de-structure as shown above. First index contains the state variable and the second index contains a function reference to change the state of that variable. Now, to initialize that variable we have passed the initial value as 0 in the useState function argument. When an user click the button, it will call calculateTotalAmount method where we passed those two as arguments. There we calculate the total amount and set it to the state using setTotalAmount method. Now, you can see it is so easy and simple to handle state in functional component. You can use any name for the state variable and the function reference.

We can also declare multiple states as shown below— with strings, objects etc.

Important Note — We cannot initialize react hooks inside a condition or a loop as shown below-

You will get below error —

We are getting this error because react manages all the states we declare here in an order. So first when you call useState(0), react marks totalAmount as the first state, next when you call useState(‘ ’), react marks address as the second state and so on. That’s how it identifies each state variables later when you use it. So, when you put state declaration inside a condition and try to use it, react complains like it is not able to manage the state as it require to.

Hope you enjoyed this short react hooks tutorial. Thank you :)
Next tutorial — React Component Lifecycle