Implementing State in React Components

In React State is an object that holds some information which can be changed overtime. Whenever a State is updated it triggers re-rendering of the component. In React components State can be implemented by default in class components and in functional components we have to implement state using hooks.

Approaches To Implementing State in React

There are two ways to implement state in React Components based upon the type of component

• Using the this.state object (Class Component)
• Using the useState hook (Functional Components)

Implementing State Using this.state object

• Create a class component by extending Component class
• Inside the constructor call the parent constructor using super() method
• Initialize state using the this.state object
• Pass the values in key-value pair
• You can update this state using the this.setState method
• To access the state we use JSX syntax and access its value

Implement State using this.state Example :

This example creates a counter in react by implementing state using the above mentioned approach

Javascript

import React, { Component } from "react";

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            count: 0,
        };
        this.increase = this.increase.bind(this);
    }

    increase() {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div style={{ margin: "50px" }}>
                <h1>Welcome to Geeks for Geeks </h1>
                <h3>Counter App using Class Component : </h3>
                <h2> {this.state.count}</h2>
                <button onClick={this.increase}> Add</button>
            </div>
        );
    }
}

export default App;

Output:

Implementing State using useState hook:

• Import the useEffect hook from react
• Create a functional component
• Create a state object using useState hook
• The second parameter in useState hook is used to update the state
• The state can be accessed using the JSX syntax

Implement state using react hooks Example:

This example creates a counter by implementing state using the above mentioned approach

Javascript

import React, { useState } from "react";

const App = () => {
    const [count, setCount] = useState(0);

    const increase = () => {
        setCount(count + 1);
    }

    return (
        <div style={{ margin: '50px' }}>
            <h1>Welcome to Geeks for Geeks </h1>
            <h3>Counter App using Functional Component : </h3>
            <h2>{count}</h2>
            <button onClick={increase}>Add</button>
        </div>
    )
}

export default App;

Output:

Conclusion:

States can be implemented in React by both functional and class components but to implement state in functional component we have to import the useState hook but state can be implemented directly in class component using the this.state object. States are useful as they are mutable unlike props and can helps us to create dynamic and interactive interfaces