To understand the scenario of why you need hooks in React, you must this video completely. I am jumping directly to the keynotes, but make sure you also watch Hitesh sir's storytelling.

Building a Counter Project

import { useState } from 'react'
import './App.css'

function App() {
    let counter = 15

    const addValue() {
        console.log(counter)
        counter = counter + 1;
    }

    const removeValue() {
        console.log(counter)
        counter = counter - 1;
    }

    return (
        <>
            <h1>Chai aur React</h1>
            <h2>Couter value: {counter}</h2>
            <button
                onClick={addValue}
            >Add Value {counter}</button>
            <br />
            <button
                onClick={removeValue}
            >Remove Value {counter}</button>
            <p>{counter}</p>
        </>
    )

onClick={addValue}: addValue is used instead of addValue() because we want to execute this function when we click on the button. addValue() can be automatically executed without clicking the button, so we cannot use this.

I faced some issues with UI updating. The value of the counter updates in the console but not in the UI. Both buttons are working, but the main issue, which is UI updating, cannot be resolved.

We cannot change UI by directly changing the variable in React because React controls UI updation.

This problem is addressed by using a React Hook—specifically, the useState Hook.

How to use useState Hook

• useState takes a default value. The value can be of any type: Number, Boolean, Empty String, Array, Object, Null, etc.

• Syntax: const [counter, setCounter] = useState(defaultValue);

• useState provides two things:

  1. The current value of the counter.

  2. A method that controls the counter variable. The method is named setCounter; however, you can choose any suitable name like chaiCounter, etc. Conventionally, setCounter is a good choice.

What useState does?

• This hook changes the state. The change can propagate to the UI, unlike let counter = 15, which will never propagate to the UI.

How to update the counter

• setCounter(counter + 1) will update the counter value.

Rebuilding a Counter Project

import { useState } from 'react'
import './App.css'

function App() {
  let [counter, setCounter] = useState(15);

  const addValue = () => {
    setCounter(counter + 1);
  }

  const removeValue = () => {
    setCounter(counter - 1)
  }

  return (
    <>
      <h1>Chai aur React</h1>
      <h2>Couter value: {counter}</h2>

      <button
        onClick={addValue}
      >Add Value {counter}</button>
      <br />
      <button
        onClick={removeValue}
      >Remove Value {counter}</button>
      <p>{counter}</p>
    </>
  )
}

export default App

Assignment Solution

Assignment: Counter cannot be less than 0 and greater than 20.

function App() {
  let [counter, setCounter] = useState(15);

  const addValue = () => {
    if (counter < 20) {
      setCounter(counter + 1);
    }
  }

  const removeValue = () => {
    if (counter > 0) {
      setCounter(counter - 1)
    }
  }
}

Watch ReactJS series by Hitesh Choudhary