How to Work with and Manipulate State in React ?

Working with and Manipulating state in React JS makes the components re-render on the UI by Updating the DOM tree. It makes sure to render the latest information and data on the interface.

Prerequisites:

• NPM & Node.js
• React JS
• State in React JS
• React JS Class components
• React JS Functional Components

These are the approaches to work with and Manipulate State in React JS.

Steps to Create React App and Installing Module: 

Step 1: Creating React Application

npx create-react-app state-demo

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd state-demo

Project Structure:

Steps to Manipulate the State in Class Components:

Now first we will see how to create and manipulate state with class components.

1. Initializing state:

Syntax:

• Initializing state object inside constructor

  constructor() {
      super();  // Don’t Forget to pass props if received
      this.state = {
          // Any object
      };
  }

• Initializing state object using class property

  class MyComponent extends React.Component {
      state = {
          // any object
      };
  }

2. Accessing State:

We can access state object anywhere in component with "this.state", the state is local so, don't try to access it from an outside component, if you need it outside then somehow you can pass it as props.

3. Manipulating State:

Class component provides us a setState function we can call it anywhere in the component to manipulate state. 

• Changing state object with a provided object as an argument while calling setState.

  this.setState({
      // anyobject
  });

• When we have to update based on the previous state we pass a function that gets the previous state as a parameter.

  this.setState((prevState) => {
      // Do return a new state object 
      // after some manipulations 
  });

• setState actions are asynchronous, so when we have to do something (ex- fetching dynamic content, changing component internally, etc) strictly after the state has been updated we pass a callback function as a second argument to setState function.

Example: This example implements the state access and manipulation in React JS Class Components.

// Filename - index.js

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

class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = {
            clicked: 0,
        };
    }
    stateManipulater = () => {
        this.setState(
            (prevState) => {
                return { clicked: prevState.clicked + 1 };
            },
            () => {
                console.log(
                    "This line will only get " +
                        "printed after state gets updated"
                );
            }
        );
    };

    render() {
        return (
            <div>
                <h3>Illustration of Working with State!</h3>

                <p>
                    This Button is associated with an
                    integer state which increments on click
                    and UI re-renders accordingly
                </p>

                <button onClick={this.stateManipulater}>
                    {`Clicked ${this.state.clicked} Times`}
                </button>
            </div>
        );
    }
}

ReactDOM.render(
    <MyComponent />, // What to Display
    document.getElementById("root") // Where to Display
);

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Explanation: This is the output of the above code, just after clicking on the button, the event gets generated which calls this.setState function to manipulate state, and immediately after that, the callback function passed as a second argument to this.setState executes, and the line gets printed on the console.

Steps to Manipulate the State in Functional Components:

1. Initializing State:

We have useState hook to work around with the state in the functional component, useState receives the initial State as an argument and returns the state variable along with a function that later can be used to set the state associated with it.

Syntax:

const [state, setState] = useState(intialState);// Note:- You are not restricted to name state variable
// as "state" and function as "setState"

2. Accessing State:

We can access state with name directly anywhere in a functional component like “state”. 

3. Manipulating State:

The function we receive from useState is used to manipulate the associated state variable. 

• Changing state object with a provided object as an argument while calling.

setState(arg);

• When we have to update based on the previous state we pass a function that gets the previous state as a parameter.

setState((prevState)=>{
    // Do return a new state object after some manipulations 
});

• Unlike class, the functional component doesn't provide us the callback when the state has changed but the useEffect hook can be used to achieve the same, useEffect calls the given function whenever something from the dependency array changes.

Example: This example implements the state access and manipulation in React JS functional components using the React JS Hooks

// Filename - index.js

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

function MyComponent() {
    const [state, setState] = useState({ clicked: 0 });

    const stateManipulater = () => {
        setState((prevState) => {
            return { clicked: prevState.clicked + 1 };
        });
    };
    useEffect(() => {
        console.log(
            "This line will only get " +
                "printed after state gets updated"
        );
    }, [state]);

    return (
        <div>
            <h3>Illustration of Working with State!</h3>
            <p>
                This Button is associated with an integer
                state which increments on click and UI
                re-renders accordingly
            </p>

            <button onClick={stateManipulater}>
                {`Clicked ${state.clicked} Times`}{" "}
            </button>
        </div>
    );
}

ReactDOM.render(
    <MyComponent />, // What to Display
    document.getElementById("root") // Where to Display
);

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Explanation: This is the output of the above code, just after clicking on the button the state gets changed by the event handler, and immediately after that, the component notices that something inside the dependency array of useEffect has been changed hence immediately executes its functionality and we have only written the console log inside it so the line gets printed just after the state change.

Points to remember while working with state:

• Don't ever change the State explicitly, because in this way react will not be able to observe the state changes, and the component's behavior will not get affected, so always use the setState function provided by the component.
• As you understood that state change causes re-render of components hence always keep an eye on the places where the state is changing, sometimes little mistakes may cause extra or in the worst case infinite re-renders, which will consequently make your application slower.  
• If you have multiple elements in the state object or array, and you only have to change one element then don't forget to spread the data otherwise it will overwrite the object/array with that single element because state updates as shallow merge.
• After updating the state don't rely on the fact that the state is surely updated, in some cases it may take a little bit of time due to the internal working of REACT, so if you have immediate use of updated state does create your own.