Mastering ReactJS: Understanding Hooks, Components, and Libraries

Learn everything about useState in React

Board Infinity
Board Infinity
Learn everything about useState in React

    React Functional Components: Introduction

    Functional Components and Class Components in ReactJS

    Understanding setState in Reactjs

    Learn everything about useState in React

    What Is The React Component Lifecycle?

    Controlled and Uncontrolled Components in ReactJS

    useCallback: Hooks in Reactjs

    React Hooks and its Advantages

    Working with React Router

    A Quick Guide to React Router DOM

    Understanding Axios in ReactJS

    Working of Axios in React

    Integrating Node APIs with React

    The state of React in 2022 – Re-Inventing The Experience of User Interface Design

    ReactJS vs. VueJS: Understanding the Differences

    React vs. React Native: Understanding the Differences

    ReactJS Project Ideas for Beginners

Introduction

The useState Hook allows functional components to have state variables. This function accepts the initial state as input parameters, returns a value reflecting the current state (which is not necessarily the initial state ), and a function to update it.

What Is UseState In React, And When Should We Use It?

The React framework provides multiple hooks that we can use in our applications. There are two hooks that we frequently use: useState and useEffect.

In UseState, one argument is taken at a time, the initial state, and two values return the current state and a state case. In the React dev tools, if we print the useState() function (console.log(useState)), we observe that it returns an array with the argument that the program provides.

For example, when creating a counter program or changing the text after clicking a button, UseState Hook can be helpful.

There are two types of components in React: Class and Functional Components. A class component is an ES6 class that extends React, and another is a functional component.  

Here's the syntax for using useState in React. The State is the first element, and the function works as the second element.

const [state, setState] = useState(initialState)  

We pass the function as an argument whenever we calculate the initial state. This initial state relies on the function's return value.

const [sum, setsum] = useState(function generateRandomInteger(){7=3+4);})  

In the above line function, the sum of numbers gets calculated and set as its initial state. The following code sample imports useState from react:

import React, { useState } from "react"  

The React library includes a built-in function called useState().

import { useState } from "react";  

Functional components are the only ones that use useState().

Application constant = () => { 
    const [counter, setCounter] = useState(0); 
    // ... JSX elements 
};  

Class components cannot use useState(). The return value of useState() is a tuple. An array's first parameter is the value's current state, and its second parameter is the function to update it.

What does React useState Hook do?

As explained previously, useState enables you to add a state to your component. When React.useState gets called by a program within a function component, it generates a single state corresponding to that function component.

While a class's state is always an object, Hooks' state can be any type. You can store any data type in the state, including objects, arrays, and booleans. The useState Hook is perfect for storing local component state, but it may need to work with other state management solutions for more complex projects.

Sample Code

The following code will help you understand how to implement the useState hook into your program.

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Message = () => {
  const [message, setMessage] = useState("");

  return (
    <div>
      <input
        type="text"
        value={message}
        placeholder="Enter a message"
        onChange={e => setMessage(e.target.value)}
      />
      <p>
        <strong>{message}</strong>
      </p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Message />, rootElement);

write your code here: Coding Playground

Output

Conclusion

The hook (function) useState allows state variables to be used by functional components. This function takes the initial state as input and returns a variable with the current state value (not necessarily the initial state) and another function for updating it.