#5 React JS Tutorial 2024 | useState Hook in React js | Hindi

Welcome to our React JS tutorial series! In this tutorial, we will be exploring the useState hook in React.js. This hook allows us to add state to functional components, making them more dynamic and interactive. We will be writing our code examples in Hindi for our Hindi-speaking audience.

What is the useState Hook?

The useState hook is a built-in React hook that allows us to add state to functional components. With the useState hook, we can create and manage state variables in functional components. This makes it easier to create dynamic and interactive components without having to convert them to class components.

How to use the useState Hook?

Using the useState hook is simple. First, we need to import it from the ‘react’ package:

{`
    import React, { useState } from 'react';
    `}

Next, we can use the useState hook in our functional component like this:

{`
    const [state, setState] = useState(initialState);
    `}

In this code snippet, ‘state’ is the current value of the state variable, ‘setState’ is a function that allows us to update the state, and ‘initialState’ is the initial value of the state variable.

Example of useState Hook in React js

Let’s look at a simple example of using the useState hook in React.js. In this example, we will create a counter component that increments a counter value with a button click:

{`
    import React, { useState } from 'react';
    
    function Counter() {
        const [count, setCount] = useState(0);
        
        return (
            

                
Count: {count}
                 setCount(count + 1)}>Increment
            
        );
    }
    `}

In this example, we use the useState hook to create a state variable ‘count’ with an initial value of 0. We display the value of ‘count’ in a paragraph element and provide a button that increments ‘count’ when clicked.

Conclusion

In this tutorial, we learned about the useState hook in React.js and how it allows us to add state to functional components. We also saw an example of using the useState hook to create a simple counter component. I hope you found this tutorial helpful and are ready to use the useState hook in your React.js projects!