What is a state in React? React state explained

React is the most prominent JavaScript library for building user interfaces. It was developed by Meta in 2011. It is widely known for its reusability and speed. React offers some outstanding features like state that make it the foremost adopted library for frontend development.

What is a state in React?

The state is the built-in object of the React components. Now, you must be wondering what are components. Let’s understand them first.
Components allow you to split the UI into independent, reusable items that help you to think about each piece in isolation. Every React application developed, constitutes pieces called ‘components’.

In React, we mainly have two types of components-:

Functional Components: Similar to the name suggests, functional components are simply JavaScript functions. The primary purpose of the functional component is to render the view and the data to the browser.
Let’s look into its example:

const FuncdemoComponent=()=>
{
    return <h1>This is a Functional Component!</h1>;
}
Code language: JavaScript (javascript)

Class Components: Class components are more complex than functional components as they can do everything that functional components do and much more. The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and offers your component access to React.Component‘s functions. The component additionally needs a render() method, this method returns HTML.
Let’s look into its example:

class ClassdemoComponent extends React.Component
{
    render(){
          return <h1>This is a class component!</h1>;
    }
}
Code language: JavaScript (javascript)

Using state in Components

The state object is used to store the data that belongs to that particular component. Functional components are stateless. It can be done via Hooks if you want to use ‘state’ in functional components. No other class can access the data stored in the state as it is private. To access that data, you’ll have to use props.

state is only accessible inside the component to which it belongs.
state is mutable, which means it can be changed as per the need.
When any change happens in the state object, the component is re-rendered.
To use the state inside a class component, “this.state” is used.
For eg:-

class DemoComponent extends React.Component {
 
    state = {value: 23};
 
    this.updateState = () => this.setState({value: (this.state.value + 1)});
 
    render() {
        return (
            <div>
                <p>{this.state.value}</p>
                <button onClick={this.updateState}Increment Value</button>
            </div>
        );
    }
 
}
Code language: JavaScript (javascript)

In this example, the rendered text will always show the value in the component’s state. Clicking the button will update the state and its value will be incremented by 1. The setState( ) method schedules the update to the component’s state object, ensures that the component knows it’s been updated, and calls the render( ) method.

To use the state inside a functional component, the “useState” hook is used.
For eg:

import React, {useState} from "react";
 
const DemoComponent = () => {
    const [value, setValue] = useState(1);
    return (
        <div>
            <p>{value}</p>
            <button onClick={() => setValue((value + 1))}>Increment Value</button>
        </div>
    );
};
Code language: JavaScript (javascript)

As you can observe, this is more readable and shorter than the class-based use case. Here, we didn’t use the setState( ) method. Instead, useState( ) is called to set up the state and obtain the updated value which gets incremented by 1. useState( ) returns a pair, the current state value, and a function that lets you update the state value. useState( ) is a Hook that is React feature that lets you use state and other React functionalities without writing class.

state vs props

What are props?

Props (short for properties) are used to pass data between React components. React’s data flow goes from parent to child only.

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent value="Hello" />    
        );  
    }
}

const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 
};
Code language: JavaScript (javascript)

Here, “value” is a defined prop and it consists of text data. Then we can pass data with props like we’re giving an argument to a function.
We use dot notation to access the prop data and render it: {props.name}

Difference between state and props

‘state’ is the local state of the component which we cannot access and modify outside of the component. On the other hand, ‘props’ make components reusable by giving them the ability to receive data from other components in the form of props.

STATE	PROPS
It is managed within the component.	It gets passed to the component
Similar to variables declared within a function.	Similar to function parameters.
These are internal	These are external
They are mutable	They are immutable
The changes can be asynchronous	These are read-only
These cannot be accessed by the child component	These can be accessed by the child component
It cannot make the component reusable	It makes the component reusable
Not present in stateless component	The stateless component can have props
Controlled by the React component itself	Controlled by whatever renders the component

Conclusion

Woah! you just learned about one of the most important topics of React.
Thank you for reading!