State in ReactJS

What is a state in React?

The state is a key concept in React. Regular variables are not that effective when it is to rerendering data. While rendering any functions or any webpage React will be unaware of the data that the variable holds.

Hence it will reset each time the page loads. But in the state, React will be aware of the data that had been stored in useState() hook. Unlike a regular variable, it won’t reset by default. And it won’t take extra memories as the regular variables do.

The changes will be visible but the function won’t execute again just because of some changes in variables. And if it does execute again, the variable just recreates again to initialize the data that the variable is getting.

To tell React that, this data should render a second time after the initial rendering we need to import something from React library.

How to use State in React ()

React state can be used just by importing the useState() hook from React library.

  • Import useState from 'react'.
import React from "react";

This here is a default import. Add a comma and curly braces after React, and between the curly braces, extract the specific things from the react library.

import React,{ } from "react";

Between the curly braces, import a function named, useState . This is a function, provided by react library. And this function allows us to define value as state, where changes to these values should reflect in the component function being called again. Which is a key difference between the regular variables of JavaScript.

import React,{ useState } from "react";
  • Inside of the component function, just call useState()
// src/App.js

import React, { useState } from "react";


function App() {
  useState()
  return (

    <div className="App">

    </div>
  );

}

export default App;
  • Set a default state value inside useState()
useState('This is default state value')

Inside of the useState() we can declare a default state value. Which can be an empty string, an empty object even an empty string as well.

This function gives access to the special variable (the default value). However, it doesn’t just return that, it also returns a function that can be used for changing the value of the variable. And this useState() returns an array. Where the first value is the variable itself and the second one is the function that helps to change or assign a value to this very variable.

  • Destructure both elements (variable and the set function) from the useState()
const [title, setTitle] = useState('This is a default state value')

Here, the first element ‘title ‘ is the variable that has a value and the second one is the function that can be called later to assign a new value to the variable.

// src/App.js

import React, { useState } from "react";


function App() {
  const [title, setTitle] = useState('This is a dfault state value')
  return (

    <div className="App">
      <h1>Title: {title}</h1>
    </div>
  );

}

export default App;

If there is data, which might change, and where changes to that data should be reflected on the user interface then we should use state. Because regular variables will not re-render the function which however react state does.