State And Hooks In ReactJS

In this article, you will learn about State & Hooks in React JS and get answers to the following questions:

1. What is the State in ReactJS & use of the state?
2. What are Hooks?
3. What is useState Hooks?
4. What is a Controlled Component or Controlled Form?
5. What is an Uncontrolled component or Uncontrolled form?
6. Simple basic useState Example.
7. Difference between Props and State

1. What is State in ReactJS & use?

The state is a special variable that is handled and preserved by ReactJS. While a normal variable disappears as per flow, state value and content are preserved by React JS.

As the Component state change component gets re-renders this re-rendering is a response to the user and other activities. But state values will not be changed.

The state was first introduced in Class components. Afterward, its added to Function components. In the function component, you can use state by using hook useState.

As Per React JS.org Site

A Hooks is a special function that lets you “hook into” React features.

For example, useState is a Hook that lets you add React state to function components.

2. What are Hooks?

A hook is a special function that helps the developers get benefits and features of Class Component in function components like-wise State and Life-Cycle methods. Hooks was introduced in React 16.8 version.

I will write a separate article on HOOKS, where you will learn more about hooks and types of hooks.

3. What is useState Hook?

This is a way to "preserve" value and content between the function calls. useState is one type of default hook that comes along with the ReactJS library. Before useState hook function, component is called the Stateless component. After the introduction of the useState hook, the function component becomes a stateful component.

To use useState, you must give the following import line at the beginning.

Example

import React, { useState } from "react"

useState syntax

const [variable,setVariable] = useState(0);

A variable is a state variable, setVariable is a method to set/assign the value to a variable. By default, assigning the 0 value to a variable.

The default value means an initial state of a variable by using useState(0).

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

import React, { useState } from 'react';
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default App;