Lesson 14 — Introduction to React Hooks

Introduction 😊

So far, you have learned how to build UI using:

• Components
• Props
• State
• Events
• Conditional rendering
• Lists and keys

But earlier in React, managing state and lifecycle features was possible only with class components.
This made React code long and complex.

To solve this problem, React introduced Hooks ⚛️

In this lesson, you will learn:

• What React Hooks are
• Why hooks were introduced
• Benefits of hooks
• Common hooks overview
• When to use hooks

Let’s begin 🚀

What Are React Hooks? 🤔

Hooks are special functions in React that let you:

• Use state
• Use lifecycle features
• Reuse logic

👉 And all this inside function components.

In simple words:

Hooks allow function components to do what class components used to do.

Why Were Hooks Introduced? 🧠

Before hooks:

• State was managed using class components
• Lifecycle methods were confusing
• Code was harder to reuse

Hooks solved these problems by:

• Making code simpler ✨
• Removing the need for class components
• Improving code readability
• Encouraging reusable logic

Example: Before Hooks (Class Component) ❌

class Counter extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increase
        </button>
      </div>
    );
  }
}

👉 This works, but the code is long and complex.

Example: With Hooks (Function Component) ✅

import { useState } from "react";

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

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

✔ Less code
✔ Easy to read
✔ Beginner-friendly

Most Commonly Used React Hooks 🔥

Here are some popular hooks you will learn in upcoming lessons:

• useState → Manage state
• useEffect → Handle side effects
• useContext → Share data globally
• useRef → Access DOM elements
• useReducer → Advanced state logic

👉 Don’t worry — we’ll learn each hook step by step.

Rules of React Hooks 📌 (Very Important)

Hooks follow strict rules.

Rule 1️⃣: Use Hooks Only at the Top Level

❌ Do NOT use hooks inside loops, conditions, or nested functions.

Rule 2️⃣: Use Hooks Only in Function Components

❌ Do NOT use hooks inside class components.

These rules ensure hooks work correctly every time.

Benefits of Using React Hooks 🌟

Hooks provide many advantages:

• Cleaner code ✨
• Less boilerplate
• Easy logic reuse
• Better readability
• No this keyword confusion

👉 This is why hooks are now the standard way of writing React code.

Hooks vs Class Components ⚖️

👉 For modern React development, hooks are preferred.

Common Mistakes Beginners Make ❌

• Using hooks inside conditions
• Forgetting to import hooks
• Mixing hooks with class components
• Overusing hooks unnecessarily

💡 Follow the rules of hooks to avoid errors.

Conclusion 🎯

React Hooks changed the way developers write React applications.

Key takeaways:

• Hooks let you use state and features in function components
• Hooks replace most class component use cases
• Hooks make code cleaner and easier to maintain
• Understanding hooks is essential for modern React

👉 Master hooks, and React will feel much simpler 💙

Frequently Asked Questions (FAQs) ❓

Are hooks mandatory in React?

No, but hooks are recommended for modern React apps.

Can I still use class components?

Yes, but they are considered legacy.

Which hook should I learn first?

useState is the best hook to start with.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 15 — useState Hook Explained
Managing state step by step using useState.