ReactJS State

In React, the state refers to an object that holds information about a component's current situation. This information can change over time, typically as a result of user actions or data fetching, and when state changes, React re-renders the component to reflect the updated UI.

Whenever state changes, React re-renders the component to reflect the updated data. This enables you to build dynamic UIs that respond to user interactions.

Syntax

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

In this syntax

• state: The current state value.
• setState: A function that is used to update the state.
• initialState: The initial value that the state will hold when the component is first rendered.

Creating State Object

Creating a state in React is essential to building dynamic and interactive components. We can create a state object within the constructor of the class component.

import React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            brand: 'Ford', // Example property in the state
        };
    }

    render() {
        return (
            <div>
                <h1>My Car</h1>
                {/* Other component content */}
            </div>
        );
    }
}

export default MyComponent;

• The MyComponent class extends React.Component, and inside the constructor, it initializes the component's state with a brand property set to 'Ford'.
• The render() method returns JSX that displays an <h1> heading with the text "My Car" and renders the component's content.

Updating State in React

We are using the ES6 thick arrow function format to take the previous state and props of the component as parameters and are updating the counter. The same can be written using the default functional way as follows.  

// Filename - index.js

import React from "react";
import ReactDOM from "react-dom/client";

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

    increment = () => {
        this.setState((prevState) => ({
            count: prevState.count + 1,
        }));
    };

    decrement = () => {
        this.setState((prevState) => ({
            count: prevState.count - 1,
        }));
    };

    render() {
        return (
            <div>
                <h1>
                    The current count is :{" "}
                    {this.state.count}
                </h1>
                <button onClick={this.increment}>
                    Increase
                </button>
                <button onClick={this.decrement}>
                    Decrease
                </button>
            </div>
        );
    }
}

const root = ReactDOM.createRoot(
    document.getElementById("root")
);
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Output

State vs Props

While both state and props store data in React, they serve different purposes:

• State: Managed within the component, mutable, and used to store dynamic data that changes over time.
• Props: Passed from a parent component to a child component, immutable, and used to share data between components.

State can change over time and cause re-renders, whereas props are used to pass data from one component to another but are not directly modified by the component receiving them.