useState in React JS

React JS

Today we will discuss about useState in react. Basically useState is a part of the hooks in the react. React introduced hooks in 16.8 version. Using hooks we can use react features in function component i.e. without using class component we can use react feature.

In react, state is used in the class component but using hooks we can use state in the function component. Basically state is a JavaScript object that holds the data within component. State is mutable i.e. we can change the value of state.

The main advantage of the hooks is “use state in function component” i.e. there is no need to write class to use the state of the application in react.

State in class component

First of all we will see use state in the class component. For example –

import React from "react";

class UseStateClass extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            name: 'Web Study Point',

        }

    }

    handleOnClick = () => {

        this.setState({

            name: 'React JS Tutorial'

        })

    }


    render() {

        const { name } = this.state

        return (

            <div>

                <p>Your name is <b>{name}</b></p>

                <button onClick={this.handleOnClick}>

                    Click me

                </button>

            </div>

        )

    }

}

export default UseStateClass

Output –

useState in react
useState in react

So in this code we have a set the name ‘Web Study Point’ in the state under constructor. In the handleOnClick function we have changed the state using setState method. When we click on button then it calls the handleOnClick function then name have changed form ‘Web Study Point’ to ‘React JS Tutorial’.

Now we will do this work using useState hooks in function component.

State in function component

Basically function component is a component where we can’t use class and react’s life cycle method. Function component is also called presentation component. Now we will use useState in function component.
For example –

import React, { useState } from "react";

const UseStateFunction = () => {

    const [name, setName] = useState('Web Study Point');

    // OR

    // const state = useState('Web Study Point');

    // const name = state[0]

    // const setName = state[1]

    
    const handleOnClick = () => {

       setName('React JS Tutorial')

    }
 

    return (

        <div>

            <p>Your name is <b>{name}</b></p>

            <button onClick={handleOnClick}>

            // OR

            {/* <button onClick={() => setName('React JS Tutorial')}> */}

                Click me

            </button>

        </div>

    )

}

export default UseStateFunction

Output –

useState in react

So in the above code example we have created function component. In this code we have used useState hooks. Firstly we have set the name in useState is ‘Web Study Point’. When we click on the button then it calls the handleOnClick function then name have changed from ”Web Study Point’ to ‘React JS Tutorial’.

useState with object

If we want to pass more than one parameter in useState then we can use object. For example –

import React, { useState } from "react";

const UseStateFunction = () => {

    const obj = { name: 'Web Study Point', course: 'Python' } // Create object

    const [ tutorial, setTutorial ] = useState(obj);
    
    const handleOnClick = () => {

        setTutorial({ name: 'Web Study Point', course: 'React JS' })

    }
 

    return (
        <div>

            <p>Your name is <b>{tutorial.name}</b> and tutorial is <b>{tutorial.course}</b></p>

            <button onClick={handleOnClick}>

                Click me

            </button>

        </div>

    )

}

export default UseStateFunction

So in the above code, we have used an object then pass this object in useState as parameter. In handleOnClick function we have changed the state of the object using setTutorial.

Conclusion

So using this tutorial anyone can easily understand useState in react.

If you want to improve this tutorial or find anything wrong/incorrect then please leave a message using below comment box.

Leave a Reply