Introducing "State" and "useState" Hook | ReactJS - part 8

←Working with event handlers - ReactJS part 7

 In the previous chapter, we learned how to handle events using the onClick event as an example, but as you know, in most cases, events do not work alone in react; we also need to handle the state to update data over time.

When the button is clicked or other events occur, it should change something on the screen, and it should happen when the state changes. So, in this case, I'm introducing state and useState Hook.

What is the state?

State is a simple JavaScript object that contains information about the output data. When state changes, the component renders based on that state. The component manages state in a manner similar to how variables declared within a function would manage variables.

Regular variables are unable to change or update values, so in order to use this strategy, you must use states. States enable you to potentially update data, and changes are applied upon application.

State continued to function independently for each function component even when the component was called repeatedly. Only a particular component will perform a reevaluation when the state changes.

1. stateLess component - Stateless components don't manage any state; they are stateless components. You may use this component more frequently throughout your application than a stateful component because it only outputs data to the screen; no updates or data changes take place, and it also accepts props.
2. stateFul component - Stateful components are functional components with hooks that manage state and data when the user updates or stores something.

What are Hooks?

Hooks are built-in JavaScript functions in React. The lifeCycle method and other features from class-based components can be used in functional-based components thanks to hooks. It enabled the use of state and additional React features in already-existing functional components without converting them into class components. 

You can also design your own Hooks to share stateful functionality between various components. There are many Hooks, and each one always begins with the word "use"

What are the rules of Hooks?

• Hooks only work in the functional components. You can use hooks in place of writing classes
• Remember that Hooks should only be called inside of the functions of React components; they should not be called inside of nested or regular JavaScript functions.

Although there are many commonly used hooks in React, I'm going to introduce the useState Hook today because it's one of the most crucial ones.

Working With useState

We were rendering the value on the screen while passing props to stateless components. We will now manage the data, use state, and deal with updating. With the useState Hook, you can include React state in functional components.

Changing the state and handling events are more crucial when we want to respond with input.

We'll call the useState Hook inside of our functional component at the top. Importing the useState Hook function from the React library requires the use of curly braces because it is a function.

import React, { useState } from 'react'

Now, we'll call it by defining an array destructuring pattern and declaring a state variable, useState helps us to create state variable. It will then return an array with two values.

const [backrGound, setBackGround] = useState('pink')

React will remember the first value, which is the current state or variable that we use in JSX, before re-rendering, and the second value, which is the function that updates the current value.

Since it is only an order, you can give it any name that makes sense. For the first name, you could describe the value, and for the second name, you could use a set followed by the repeated name.

We can pass the initial value as an argument to useState('pink'). The argument can be an object, string, and number; it depends on what we need. If we don't have any default value we can use an empty string useState(' ').

The state updating function is called inside the area where we want to handle the updating in order to assign the new value. The new value is passed as an argument to that function. 

The state changes will be triggered by handling events by executing the code and updating the component. React has a lot of beauty.

const handleUpdateBg = () => {
  setBackGround('yellow');
}

Since the first variable in this case has the value "pink," our buttons are pink by default. However, when setBackGround("yellow") is called, our buttons will update and change to yellow.

The issue is how to update the function for this; we'll use even handler onClick. Please read my previous chapter for a detailed explanation of how to handle events.

In JSX

<button style={{backgroundColor: backGround}} onClick={handleUpdateBg}>edit</button>

Full Example code

import {useState} from 'react'
const list = ({name, language, level}) => {
const [backGround, setBackGround] = useState('pink')

const handleUpdateBg = () => {
        setBackGround("yellow");
    }
  return (
        <FancyBorder className="list">
            <h3>{name}</h3>
            <span>{language} : {level}</span>
            <button style={{backgroundColor: backGround}} onClick={handleUpdateBg}>edit</button>
        </FancyBorder>
    )
}

You can use multiple state variables, and each one will update separately. Consider the scenario where we want to simultaneously update the button's background color and edit the name.

The same procedure will be followed to register a new state with useState, which returns two values: the name itself and an updated name after calling an updating function. The first element is used when we want to output the state value in JSX.

import {useState} from 'react'
const list = ({name, language, level}) => {
 const [backGround, setBackGround] = useState('pink')
 const [text, setText] = useState(name)

 const handleUpdateBg = () => {
        setBackGround("yellow");
 }
 const handleUpdate() => {
  setText('Gabbar')

  handleUpdateBg()
 }
 return (
        <FancyBorder className="list">
            <h3>{text}</h3>
            <span>{language} : {level}</span>
            <button style={{backgroundColor: backGround}} onClick={handleUpdate}>edit</button>
        </FancyBorder>
    )
}

Now, when you click the button, both at the same time, the name will be updated to 'Gabbar' and the button will be 'yellow' in color. Suppose you have any questions about the above coding. In that case, I encourage you to follow my react series and subscribe to my channel 'elpeeda', and learn everything there is to know about React's functionality.

Conclusion 

State is a part of the component. It returns two values: the first is a variable's default value, and the second is a function that modifies the variable's first value without reloading the entire application, just the component where it is applied.

Utilizing class features in a functionally based component is made easier by hooks. Because React does not follow all the variables we defined in our application, we cannot update a value directly in React using a simple variable.