State in React.js

Posted on by

In React.js, state is a built-in feature that allows components to manage and store their own data. Unlike props, which are passed from parent to child components and are immutable, state is managed within a component and can be updated over time, typically in response to user actions or other events.

Here’s how state works in React:

  1. Initializing State:
    You can initialize state in a class component by setting the this.state property in the constructor. State should be initialized with an object containing the initial values for the data you want to manage. Example:
   import React, { Component } from 'react';

   class MyComponent extends Component {
       constructor(props) {
           super(props);
           this.state = {
               count: 0
           };
       }
   }
  1. Accessing State:
    You can access the current state values using this.state within class components. State values are mutable and can be read and updated using this.setState(). Example:
   class MyComponent extends Component {
       constructor(props) {
           super(props);
           this.state = {
               count: 0
           };
       }

       render() {
           return (
               <div>
                   <p>Count: {this.state.count}</p>
               </div>
           );
       }
   }
  1. Updating State:
    To update state, you should never directly modify this.state. Instead, use the this.setState() method, passing it an object containing the updated state values. React will then merge the new state values with the current state and re-render the component. Example:
   class MyComponent extends Component {
       constructor(props) {
           super(props);
           this.state = {
               count: 0
           };
       }

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

       render() {
           return (
               <div>
                   <p>Count: {this.state.count}</p>
                   <button onClick={this.handleClick}>Increment</button>
               </div>
           );
       }
   }
  1. Functional Components with Hooks:
    With the introduction of Hooks in React, functional components can also have state using the useState hook. This allows functional components to manage state without using classes. Example:
   import React, { useState } from 'react';

   const MyComponent = () => {
       const [count, setCount] = useState(0);

       const handleClick = () => {
           setCount(count + 1);
       };

       return (
           <div>
               <p>Count: {count}</p>
               <button onClick={handleClick}>Increment</button>
           </div>
       );
   };

State is an essential concept in React development, allowing components to manage their own data and respond to user interactions dynamically. It enables the creation of interactive and responsive user interfaces in React applications.