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).

Example

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

What is a Controlled Component or Controlled Form?

Handle and maintain form's input value via state is considered a controlled component.

Form input values can be set to state values and then updated via ReactJS events. A Controlled component is a component that manages its input values using state. Controlled Form / Component keep all state and values in the ReactJS State not relying on the DOM (Document Object Model) to get/retrieve the element’s value.

What is an Uncontrolled component or Uncontrolled form?

Which component/form is not controlled and handled by the React JS State is called the Uncontrolled component or Uncontrolled Form. Uncontrolled components are handled by DOM (Document Object Model).

Simple basic useState Example

In the following example, the default Value of the Count variable is 0.  As the user presses "CLICK ME" button, the Count variable value will get increased. The count variable is the state variable using the useState hook.

CODE

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;

7. Difference between Props and State

PROPS	STATE
1. Props are read-only.	1. State are not readonly, updateable.
2. Props accessed by the child component.	2. State only used within component.
3. Props pass value and make component reusable.	3. State set the updatable value within component.