Introduction to React Hooks 🪝
Tags: react, hook, state, javascript
Published: 2022-08-15 22:56:18

Welcome back, readers, to another blog where I attempt to demystify and clarify a specific web development topic. This blog post will concentrate on defining React Hooks and demonstrating how to use them in your React application.

React is a JavaScript library that makes it simple to construct rich user interfaces and single page applications. You develop your user interface using components that you generate in React. State and props are two of the most essential React component features. A React component's state is an object that controls how the component renders and functions. Only class-based components could hold state prior to the invention of hooks. On the other hand, using props enables us to communicate with our components. The official [website](https://reactjs.org/) is definitely a good place to start if you want to learn more about React.

With the introduction of hooks in version 16.8 of the React library, you may now use state and other React capabilities without the need for classes. In other words, a functional component allows for the addition and modification of state. You can utilize a number of React hooks, but for the sake of this article, I'll concentrate on `useState` which is one of the most crucial and widely used hooks.

**useState Hook**
The `useState` hook enables us to use and control state inside a functional component. The `useState` hook is used in the basic functional component shown below as an example.


![useState hook code example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g510x5ykfms8c1f05vb5.png)

This component is made up of an `input` tag and a `h1` tag. The information you type in the `input` tag is shown in the `h1` tag as you type.

The `useState` hook from the React library is imported in line one of the code above. However, line 5 of the code is the most crucial one. We start using our imported `useState` hook here. In essence, the `useState` hook is a function that takes an initial state. I passed an empty string in our example. A pair of values are returned in an array by the `useState` hook.

The array's first value is the state as it is at the moment, and its second value is a function that lets you modify or update the state. The two values are extracted from the array and stored in separate constants using array destructuring in the code above.

In contrast to object destructuring, array destructuring allows you to use any name for your constants, but order is crucial. When naming your function, start with `set`, you'll often use the format shown below, followed by the name of the constant you used to store the current state. as in "`setName`," "`setAge`," "`setColor`," etc.

We make use of the `setName` method in the `onChange` event on line 10. The `setName` function receives the value of the input tag, which updates the state in this case, the `name` constant.

I would like to draw your attention to the fact that the `useState` hook can be used many times within one functional component. See image below 👇


![useState hook example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zofdrzbwjjeihrjvhqz6.png)

Thank you for reading, and I hope this article gave you some insight into React hooks that you can utilize in the future.