State in React.js with Examples

 

State in React.js with Examples

State is a built-in object in React that allows components to store and manage data that can change over time. Unlike props, which are immutable, state is mutable and can be updated using the setState method (in class components) or useState hook (in functional components).

1. State in Functional Components (Using Hooks - useState)

Since React 16.8, functional components can use state with the useState hook.

import React, { useState } from "react";

 

import React, { useState } from 'react';

 

function Counter()

{

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

 

    return(

        <div>

            <h1>Counter : {count}</h1>

            <button onClick={()=>setCount(count + 1)}>Increment</button>

            <button onClick={()=>setCount(count - 1)}>Decrement</button>

        </div>

    )

}

 

export default Counter;

Explanation:

  • useState(0) initializes the state variable count with 0.
  • setCount updates the state when the buttons are clicked.
  • The component re-renders when the state changes.

2. State in Class Components (this.state)

In class components, state is managed using this.state and updated using this.setState().

import React, { Component } from 'react';

 

class Counter extends Component

{

 

    constructor(props) {

      super(props)

 

      this.state = {

        count:0

      };

 

    }

 

    increment = ()=>{

        this.setState({count:this.state.count+1})

    }

 

    decrement = () =>{

        this.setState({count:this.state.count-1})

    }

 

    render()

    {

        return(

        <div>

            <h1>Counter:{this.state.count} </h1>

            <button onClick={this.increment}>Increment</button>

            <button onClick={this.decrement}>Decrement</button>

        </div>

        )

    }

 

}

 

export default Counter;

Explanation:

  • this.state = { count: 0 } initializes the state.
  • this.setState({ count: this.state.count + 1 }) updates the state and re-renders the component.
  • Methods increment and decrement modify the state when buttons are clicked.

Key Differences Between State in Functional and Class Components

Feature

Functional Component (useState)

Class Component (this.state)

Syntax

const [state, setState] = useState(initialValue);

this.state = { key: value };

State Updates

Uses setState(value)

Uses this.setState({ key: value })

Simplicity

More concise and readable

More verbose

Performance

Preferred in modern React (lightweight)

Uses this binding, slightly less efficient

Conclusion

  • Use Functional Components (useState) for modern React applications.
  • Use Class Components (this.state) when working with legacy code.
  • The useState hook is simpler and preferred for handling state in functional components.

 

Comments

Post a Comment

Popular posts from this blog

Axios in React.js

  Axios in React.js What is Axios? Axios is a popular JavaScript library used to make HTTP requests (GET, POST, PUT, DELETE) in React applications. It is based on Promises and provides a simple way to interact with APIs. Why Use Axios? ✅ Supports request and response interceptors ✅ Handles automatic JSON conversion ✅ Supports error handling ✅ Can cancel requests using abort controllers ✅ Works in browsers and Node.js 1. Installing Axios in React Before using Axios, install it in your React project: npm install axios 2. Making a GET Request (Fetching Data) Axios is commonly used to fetch data from an API inside useEffect() . Example: Fetching Data with Axios ( GET Request) import React , { useEffect , useState } from 'react' ; import axios from 'axios' ;   const UserList = () => {       const [ users , setUsers ]   = useState ([]);       // web loading web mounting      ...
Read more

Conditions in React.js

  Conditions in React.js In React, conditional rendering is used to display different UI elements based on conditions. There are multiple ways to handle conditions in React. 1. Using if-else Statements (Inside Function Components) Traditional if-else statements can be used inside a function. Example: Conditional Rendering Using if-else import React from 'react' ;   const Message = ({ isLoggedIn }) => {       if ( isLoggedIn )     {         return < h2 > Welcome back, User! </ h2 > ;     }     else {         return < h2 > Please log in. </ h2 > ;     }   }   export default Message ; App.js   import './App.css' ; import Message from './components/Message' ; function App () {   return (     < div className = "App" >         < Message isLoggedIn = "" />   ...
Read more

Applying map() Function in React.js (Arrays & Objects)

  Applying map() Function in React.js (Arrays & Objects) 1. Using map() on Arrays in React The map() function is used to iterate over an array and transform its elements into JSX elements. Example: Rendering a List from an Array import React from 'react' ;   const students = [ "John" , "Alice" , "Bob" ];   const StudentList = () => {       return (         < div >             < ul >                 {                     students . map (( student , index ) => ( < li key = { index } > { student } </ li > ))                 }             </ ul >         </ div >     )   }   export default StudentList ; Key Points map() loops over the studen...
Read more