What is State Management

In React, state represents the dynamic data that a component manages. It's essentially a JavaScript object that holds information that can change over time. Whenever a component's state changes, React re-renders the component to reflect the updated data.

Key Points About State:

• Component-specific: State is typically associated with a particular component.

• Mutable: State can be modified using methods provided by React.

• Triggers re-renders: Changes in state automatically cause the component to re-render.

Managing State with useState Hook

For functional components, the useState hook is the primary tool for managing state. It returns an array with two elements:

1. Current state value: The initial value or the latest value of the state.

2. Function to update state: A function used to modify the state.

When to Use State

• When data needs to be preserved between renders.

• When data is specific to a component and doesn't need to be shared with other components.

• When the data is relatively simple and doesn't involve complex logic.

Challenges with Local State

As your application grows, managing state within individual components can become complex. Issues like:

• Prop drilling: Passing data through multiple levels of components.

• State updates triggering unnecessary re-renders.

• Difficulty in sharing state across components.

Hand's on with State Management

Suppose we are writing a counter application and the react code for this counter application is as follows:

import React from 'react';

const Counter = () => {
    let count = 0

    return (
        <div>
            <h1>Counter</h1>
            <h2>{count}</h2>
            <button>Increment</button>
            <button>Decrement</button>
        </div>
    );
}

export default Counter;

The above code on web will look like:

Let's create two function's which will increment the count value when increment button is clicked and decrement the count value when we click on the decrement button:

import React from 'react';

const Counter = () => {
    let count = 0;
    const increment = () => {
        count = count + 1
    };

    const decrement = () => {
        count = count - 1;
    };

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

export default Counter;

We can see, there will be no changes in the web, as count value is incrementing and decrementing but not updating over the web:

Now, let's use useState hook:

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const increment = () => {
        setCount(count+1)
    };

    const decrement = () => {
        setCount(count-1)
    };

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

export default Counter;

Now that we have used useState hook, we can expect the following result on web:

Conclusion

State management in ReactJS is a fundamental concept that ensures your application remains dynamic and responsive to user interactions. By understanding and effectively using tools like the useState hook, developers can manage state within functional components efficiently. However, as applications grow, challenges such as prop drilling and unnecessary re-renders can arise, necessitating more advanced state management solutions. Mastering these concepts will enable you to build robust, maintainable, and scalable React applications.