State in ReactJS

What is a State?

The state is an object. We can use the state as a variable in Rect.JS

Why do we use a state instead of a variable?

If we use a variable the react component does not update. If we use state then react component understands anything is updated. Suppose anyone clicks on the button so the component updates the state and prints it. The state is used only by

import './App.css'

function App() {
  let counter = 1;
  const incrementFun = () =>{
    counter = 10;
    alert(`Counter value updated ${counter}`)
  }

  return (
    <>
<div className='App'>
  <h1>State in Fuctional Component</h1>
  <h2>{counter}</h2>
  <button onClick={() => incrementFun()}>Increment</button>
</div>
    </>
  )
}

export default App

In this ablow example we can update data but only in the alert counter does not change. Because the component does not update or re-render.

useState used in Functional Component:

If you can use usestate hook. You can easily update the counter value.

import { useState } from 'react';
import './App.css'

function App() {
  const [counter, setCounter] = useState(0);
  const incrementFun = () =>{
    setCounter(10);
    alert(`Counter value updated`)
  }
  return (
    <>
<div className='App'>
  <h1>State in Fuctional Component</h1>
  <h2>{counter}</h2>
  <button onClick={() => incrementFun()}>Increment</button>
</div>
    </>
  )
}
export default App

Importing: To use useState you need to import useState from react as shown below:

import React, { useState } from "react"

Syntax: The first element is the initial state and the second one is a function that is used for updating the state.

const [state, setState] = useState(initialstate)

State in Class Component:

You can't use useState hook in the class component. follow following steps

Step 1: Create a constructor

Step 2: Add super() in a constructor. It's not react functionality it's used in JavaScript. We use super() for calling the parent constructor.

Step 3: Write inside the constructor this.state = {} for creating one object.

Step 4: Then same as javascript we can write key-value pair Ex: counter:10

Step 5: If you want to update the state at the click of a button. So use onClick but before calling function write this keyword. Ex: onClick{() => this.counterUpdate()}

Step 6: Then define the function and write this.setState({counter:20}); inside the function Because I want to update the counter use setCounter.

import React from 'react';
import './App.css'

class App extends React.Component {
  constructor ()
  {
    super();
    this.state ={ 
      counter :10
    }
  }
 incrementFun() {
    this.setState({counter:this.state.counter+10});
  }
  render()
  {
    return (
      <>
  <div className='App'>
    <h1>Wlecome! State in class Component</h1>
    <h2>{this.state.counter}</h2>
    <button onClick={() => this.incrementFun()}>Increment</button>
  </div>
</>
    )
  }
}

Can we use a state outside the component?

Generally, we don't use a state outside the component. and State is similar to props, but it is private and fully controlled by the component.

Thank You for reading this blog. If you read more blogs please check my account.