React Hooks (Modern React): What Are Hooks?

Introduction

React Hooks are one of the most important additions to modern React. They allow developers to use React features such as state and lifecycle behavior inside functional components.

Before Hooks, these features were available only in class components. Hooks simplify React code, reduce complexity, and make components easier to read and maintain.

This article explains what React Hooks are, why they were introduced, how they work, and how to use them with simple examples, making it suitable for both beginners and professionals.

What Are Hooks in React?

Hooks are special functions provided by React that let you use React features in functional components.

Hooks allow you to:

• Manage state
• Handle side effects
• Reuse logic between components

Hooks do not work inside class components. They are designed specifically for functional components.

Why Were Hooks Introduced?

Before Hooks, developers had to use class components to:

• Store state
• Use lifecycle methods
• Share logic across components

This caused problems such as:

• Large and complex class components
• Repetitive lifecycle logic
• Difficulty in reusing code

Hooks were introduced to solve these problems and make React development simpler and more consistent.

Basic Rules of Hooks

Hooks follow two important rules:

1. Hooks must be called at the top level of a component
2. Hooks must be called only inside React functional components or custom Hooks

Breaking these rules can cause unexpected behavior.

Commonly Used React Hooks

React provides several built-in Hooks. The most commonly used ones are:

• useState
• useEffect
• useContext
• useRef
• useMemo
• useCallback

In this article, we will focus on the basics using simple examples.

useState Hook

The useState Hook allows you to add state to a functional component.

Example

import { useState } from "react";

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

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

export default Counter;

Explanation

• count stores the current state value
• setCount updates the state
• Updating state causes the component to re-render

useEffect Hook

The useEffect Hook is used to perform side effects such as:

• Fetching data
• Updating the document title
• Subscribing to events

Example

import { useEffect } from "react";

function Example() {
  useEffect(() => {
    document.title = "React Hooks Example";
  }, []);

  return <p>Check the browser title</p>;
}

Explanation

• useEffect runs after the component renders
• The empty dependency array ensures it runs only once

Using Multiple Hooks in a Component

function Profile() {
  const [name, setName] = useState("Guest");
  const [age, setAge] = useState(25);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

Hooks make it easy to manage multiple pieces of state without complex logic.

Hooks vs Class Components

Benefits of Using Hooks

• Cleaner and shorter code
• Better logic reuse
• Easier to understand
• Encouraged by React team
• Standard in modern React development

Common Beginner Mistakes

• Calling Hooks inside loops or conditions
• Using Hooks in class components
• Forgetting dependency arrays in useEffect
• Modifying state directly

Interview Questions and Answers

What are Hooks in React?

Hooks are functions that allow functional components to use state and other React features.

Why are Hooks used instead of class components?

Hooks simplify code, improve readability, and make logic reuse easier.

Can Hooks be used in class components?

No, Hooks can only be used in functional components.