🪝useState Hook🪝

Hooks were introduced in React v16.8.0, offering a way to utilize state and other React features without the need for class components 😃. In this article, we'll explore how to harness the power of the built-in useState() hook to enable state management in your functional components.

Please read about React Hooks from here

What is useState Hook? 🤔🎯

This handy hook does one specific thing - it allows you to add state to your function components 🤠. No more dealing with class components or converting function components to classes just to use state!

In almost every React app, you'll need a way to store and manage state within your components. The useState React Hook provides a cleaner and more concise solution 😄.

It returns a pair: the current state and the function to update it.

Syntax: 🤷🏻‍♂️

import React, { useState } from 'react';

// Inside any component function
const [learn, setLearn] = useState('Learning Hooks');

When we declare a state variable with useState, it returns an array with two items. By using square brackets, we're performing array destructuring:

1. The first item is the current value (initially 'Learning Hooks').

2. The second is the function to update the state.

You can call this state as many times as you want.

What Does the useState Hook Do? 🤔

The useState hook lets you easily add state to function components. Unlike class components where state is always an object, with Hooks, state can be any type. Each piece of state holds a single value, which can be an object, an array, a boolean, or any other type you can imagine.

How to use the useState Hook 💥

Using useState is straightforward:

1. Import useState from React.

2. Destructure useState - the first item becomes the state variable's name, and the second becomes the update function's name. You can choose any name you like.

3. Provide an initial value to useState.

Here's an example:

import React, { useState } from 'react';

function LikeButton() {
  // Declare a state variable 'likes' with an initial value of 0
  let [likes, setLikes] = useState(0);

  // Function to handle when the 'Like' button is clicked
  const handleLikeClick = () => {
    // Use the setLikes function to update the 'likes' state
    setLikes(prevLikes => prevLikes + 1);
  };

  return (
    <div className="LikeButton">
      <p>This post has {likes} likes</p>
      <button onClick={handleLikeClick}>
        Like
      </button>
    </div>
  );
}

export default LikeButton;

In this example, we have a component called LikeButton that manages the number of likes for a post. It initializes the likes state to 0 using the useState hook. When the "Like" button is clicked, the handleLikeClick function is called, which uses setLikes to update the likes state by incrementing it by 1. The current number of likes is displayed in a paragraph, and the button allows users to increment the likes when clicked.

When Should You Use the useState Hook? 🤔

You should use the useState hook when you want to keep track of and change data within a component in a simple way. It's like having a notepad for your component to remember and update information, such as numbers, text, or other values, easily.😯.

Conclusion 💥🙌

In summary, useState is a built-in hook that simplifies adding state to functional components. It's versatile, allowing different data types for the state, and you can create multiple pieces of state with individual initial values and update functions.

Hopefully, this tutorial helped you understand what the useState hook is and how to use it effectively in your React projects. 🎯

Thanks for reading all the way to the end! 💖

If you have any questions, please use the comments section 💬

Let's connect! Find me on the web 🔗

If you have any Queries or Suggestions, feel free to reach out to me.

Happy Coding :)❤️