​​State in ReactJS

Example

import React, { useState } from 'react';
function Counter() {
    const [count, setCount] = useState(0); // Declaring state
    return (
        <div>
            <h1>Counter: {count}</h1>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    );
}
export default Counter;

Explanation

• useState(0) initializes the state variable count with a value of 0.
   
• setCount is used to update the value of count.
   
• Clicking the "Increase" button increments the counter and updates the UI automatically.

Creating State Object

State in class components and functional components is managed differently. While functional components use the useState hook, class components rely on the this.state object.

Functional Components

import React, { useState } from 'react';

function Example() {
    const [text, setText] = useState('Hello, World!');

    return (
        <div>
            <p>{text}</p>
            <button onClick={() => setText('React is awesome!')}>Change Text</button>
        </div>
    );
}
export default Example;

Class Components

import React, { Component } from 'react';
class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: 'Hello, World!'
        };
    }

    changeText = () => {
        this.setState({ text: 'React is awesome!' });
    };


    render() {
        return (
            <div>
                <p>{this.state.text}</p>
                <button onClick={this.changeText}>Change Text</button>
            </div>
        );
    }
}

export default Example;

Conventions of Using State in React

To use state effectively in React, follow these conventions:

1. Initialize State Properly: Always initialize state in the constructor (for class components) or using useState (for functional components).
    
2. Keep State Simple: Avoid over-complicating state by including unnecessary data. Use separate state variables for unrelated pieces of information.
    
3. Avoid Direct Mutations: Never modify state directly. Always use setState or state updater functions to ensure React handles updates correctly.

Example of Incorrect State Mutation

this.state.text = 'New Text'; // Incorrect

Correct Way

this.setState({ text: 'New Text' });

Use Functional Updates When Necessary: For complex state updates, use the functional form of setState or useState.

Updating State in React

React provides two methods for updating state:

Functional Components

Using the setState updater function:

setState((prevState) => prevState + 1);

Class Components

Using the this.setState method:

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

Example

function Counter() {
    const [count, setCount] = useState(0);


    const increment = () => {
        setCount((prevCount) => prevCount + 1);
    };


    return (
        <div>
            <h1>{count}</h1>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

Managing Complex State

Sometimes, components require managing multiple interrelated pieces of state. This can be done using objects or external libraries like Redux for advanced state management.

Example

function UserProfile() {
    const [user, setUser] = useState({
        name: 'John Doe',
        age: 25,
        location: 'New York'
    });
    const updateAge = () => {
        setUser((prevUser) => ({
            ...prevUser,
            age: prevUser.age + 1
        }));
    };
    return (
        <div>
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
            <p>Location: {user.location}</p>
            <button onClick={updateAge}>Increase Age</button>
        </div>
    );
}

Explanation

• setUser is used to update the user object while preserving its existing properties using the spread operator (...).

State vs. Props

Frequently Asked Questions

What is the difference between props and state in React? 

Props are immutable and passed from parent to child components, while state is mutable and managed locally within a component.

Why should we not modify state directly in React? 

Directly modifying state bypasses React's re-rendering process, which can lead to inconsistencies in the UI.

How can I manage complex state in React? 

You can manage complex state using objects, the spread operator, or state management libraries like Redux for larger applications.

Conclusion

State in ReactJS is a fundamental concept for building dynamic and interactive applications. This article covered the basics of state, how to create and update it, and best practices for managing simple and complex state scenarios. Understanding state allows you to build responsive and efficient user interfaces.

You can also check out our other blogs on Code360.