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 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.
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 👇
Thank you for reading, and I hope this article gave you some insight into React hooks that you can utilize in the future.
Top comments (0)