React Hooks

Introduction

React Hooks are one of the most important features introduced in React. Before Hooks were introduced, developers mainly used class components for handling:

• State
• Lifecycle methods
• Side effects

However, class components were often complex and difficult to manage in large applications. To solve these problems, React introduced Hooks in React 16.8.

Hooks allow developers to use React features such as state and lifecycle functionality inside functional components.

What are React Hooks?

React Hooks are special functions that allow functional components to use React features like:

• State
• Lifecycle methods
• Context
• Refs

Before Hooks:

• Functional components were simple UI components
• State management required class components

After Hooks:

• Functional components became powerful and fully featured

Why Hooks are Used in React?

Hooks were introduced to solve several problems in class components.

Problems with Class Components

• Complex syntax
• Difficult lifecycle methods
• Repetitive logic
• Hard-to-manage state
• Confusing this keyword

Hooks simplify all these issues.

Benefits of Hooks

• Simpler code
• Better readability
• Reusable logic
• Easier state management
• Better performance optimization

Syntax of React Hook

Basic Hook example using useState:

import { useState } from "react";
function App() {
 const [count, setCount] = useState(0);
 return (
   <div>
     <h1>{count}</h1>
     <button onClick={() => setCount(count + 1) } > Increment </button>
   </div>
 );
}
export default App;

Understanding the Syntax

useState

A Hook used for state management.

count

Current state value.

setCount

Function used to update state.

Rules of Hooks

React Hooks follow special rules.

1. Only Call Hooks at Top Level

Correct:

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

Wrong:

if (true) {
 useState(0);
}

2. Only Use Hooks Inside React Functions

Hooks can be used:

• Inside functional components
• Inside custom Hooks

Not inside:

• Regular JavaScript functions
• Loops
• Conditions

Common React Hooks

React provides multiple built-in Hooks.

Main Hooks:

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

1. useState Hook

useState is used for managing component state.

Example

import { useState } from "react";
function Counter() {
 const [count, setCount] = useState(0);
 return (
   <button onClick={() => setCount(count + 1) } >
     {count}
   </button>
 );
}

Output

2. useEffect Hook

useEffect handles side effects such as:

• API calls
• Timers
• DOM updates

Example

import { useEffect } from "react";
function App() {
 useEffect(() => {
   console.log("Component Rendered");
 }, []);
 return <h1>Hello</h1>;
}

3. useContext Hook

useContext shares data globally without prop drilling.

Example

const value = useContext(UserContext);

4. useRef Hook

useRef accesses DOM elements directly.

Example

const inputRef = useRef();

5. useMemo Hook

useMemo optimizes expensive calculations.

Example

const result = useMemo(() => {
 return calculate();
}, []);

6. useCallback Hook

useCallback memoizes functions.

Example

const memoizedFunction =
 useCallback(() => {
   doSomething();
 }, []);

Difference Between Hooks and Class Components

Why Hooks are Popular?

Hooks became popular because they:

• Reduce code complexity
• Improve readability
• Remove this keyword confusion
• Support reusable logic

Real-Life Example of React Hooks

Suppose you are building an e-commerce website.

Hooks help manage:

• Product state
• Shopping cart
• User authentication
• API requests
• Theme switching

Without Hooks, managing these features becomes difficult.

Custom Hooks in React

Developers can create their own Hooks.

Custom Hooks help reuse logic.

Example

import { useState } from "react";
function useCounter() {
 const [count, setCount] = useState(0);
 function increment() {
   setCount(count + 1);
 }
 return {
   count,
   increment
 };
}

Benefits of Custom Hooks

• Reusable logic
• Cleaner code
• Better maintainability

Advantages of React Hooks

Common Mistakes in React Hooks

1. Calling Hooks Inside Conditions

Wrong:

if (true) {
 useState(0);
}

Correct:

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

2. Forgetting Dependency Array in useEffect

Wrong:

useEffect(() => {
 console.log("Hello");
});

This runs after every render.

3. Updating State Incorrectly

Wrong:

count = count + 1;

Correct:

setCount(count + 1);

4. Overusing useEffect

Not every operation requires useEffect.

5. Using Hooks Outside Components

Hooks only work inside React functions.

Best Practices for React Hooks

• Use functional components
• Keep Hooks at top level
• Use custom Hooks for reusable logic
• Keep state minimal
• Avoid unnecessary effects
• Use proper dependency arrays

Real-World Applications of React Hooks

Hooks are heavily used in:

• Social media apps
• E-commerce websites
• Banking applications
• Admin dashboards
• Chat applications

Examples:

• Login systems
• API handling
• Theme switching
• Notifications
• Search filters

React Hooks vs Traditional JavaScript Functions

React Hooks – Interview Questions

React Hooks – Objective Questions (MCQs)

Conclusion

React Hooks are one of the most powerful features in modern React development. They allow developers to use state, lifecycle methods, refs, and context inside functional components without using class components.

Hooks make React applications:

• Cleaner
• Simpler
• More reusable
• Easier to maintain

Continue Learning React