React Hooks Explained Simply ⚛️

React Hooks are one of the most important concepts in React. They help us use features like state and lifecycle behavior inside functional components.

Let's understand React Hooks in simple terms! 🚀

🔹 What Are React Hooks?

React Hooks are special functions that allow functional components to use React features such as state, context, and effects.

Before Hooks were introduced in React 16.8, state and lifecycle methods were mainly associated with class components.

🔹 Common React Hooks

1. useState()

useState() is used to store and update data inside a component.

Example:

import { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

Explanation:

count stores the current value.

setCount updates the value.

useState(0) sets the initial value to 0.

Whenever the button is clicked, the count increases by one!

Comments

[Tarun Sharma]

Clear intro. A habit worth picking up early: when the next value depends on the previous one, use the functional form, setCount(c => c + 1). Call setCount(count + 1) twice in one handler and you only get +1, because both calls read the same count from that render.