useState - React Hooks Series

Welcome to the hooks series of react. In this series, I will go through the different hooks which were introduced in React 16.8.

Series path

useState
useEffect

Why do we prefer functional component over class component in react

Functional component is much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks
Functional component are written shorter and more straightforward, which makes it easier to develop, understand, and test.
With the introduction of Hooks in we are now able to manage state in functional components.

What is Hooks?

Hooks were a new addition in React 16.8. They let you use state and other React features without writing a class. It means you don't need to use a class component to use a state.

What is useState Hook?

useState is a Hook which allows you to have state variables in functional components.

First of all, let us import useState hook from react.

import React, { useState } from "react";

How to use:

const [name, setName] = useState("Pratap");

Let us try to understand what we just added:

name: State Variable.
setName: Function to change the state value.
useState: useState react Hook.
Pratap: State initial value.

Example

import React, { useState } from "react";

const Example = () => {
  const [name, setName] = useState("Pratap");

  return (
    <div>
      <h1>{name}</h1>
    </div>
  );
};

export default Example;

Now, let us add a button which will change the state value from Pratap to Prasar.

import React, { useState } from "react";

const Example = () => {
  const [name, setName] = useState("Pratap");

  const changeState = () => {
    //This will change the state value
    setName("Prasar");
  };

  return (
    <div>
      <h1>{name}</h1>
      <button onClick={changeState}>Change Name</button>
    </div>
  );
};

export default Example;