Different Types of Hooks in ReactJS

By /

ReactJS has changed the way we build user interfaces. Earlier, React developers mainly used class components to manage state and lifecycle methods. But with the introduction of Hooks in React 16.8, functional components became much more powerful.

Hooks allow you to use state, lifecycle features, and other React capabilities without writing a class. They make code simpler, reusable, and easier to understand.

In this article, we will discuss different types of Hooks in ReactJS in simple English, with clear explanations and practical examples.

What Are Hooks in ReactJS?

Hooks are special functions provided by React that let you “hook into” React features such as state management, side effects, context, and more.

Before Hooks:

  • State and lifecycle logic was only available in class components
  • Code was harder to reuse
  • Large components became complex

After Hooks:

  • Functional components can manage state
  • Logic can be reused easily
  • Code is cleaner and more readable

Hooks always start with the word use, such as useState, useEffect, etc.

Rules of Hooks

Before learning different types of Hooks, it is important to know the Rules of Hooks:

  1. Only call Hooks at the top level.Do not call Hooks inside loops, conditions, or nested functions.
  2. Only call Hooks from React functions.Call Hooks inside functional components or custom Hooks.

These rules help React track Hooks correctly.

Types of Hooks in ReactJS

React Hooks can be divided into three main categories:

  1. Basic Hooks
  2. Additional Hooks
  3. Custom Hooks

Let us understand each type one by one.

Basic Hooks

Basic Hooks are the most commonly used Hooks in React applications.

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

Example:

import React, { useState } from "react";

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

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

count is the state variable, setCount updates the state, useState(0) sets the initial value .

  • useEffect Hook : The useEffect Hook is used to handle side effects such as fetching data, updating the DOM, timers, subscriptions.
import React, { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("Component mounted");
  }, []);

  return <h1>Hello React</h1>;
}

The effect runs after the component renders. Empty dependency array [] means it runs only once .

  • useContext Hook : The useContext Hook allows you to access context values easily without using Consumer components.
import React, { useContext } from "react";

const ThemeContext = React.createContext("light");

function Theme() {
  const theme = useContext(ThemeContext);
  return <p>Theme is {theme}</p>;
}

useContext reads the nearest context value. Helps avoid prop drilling

Additional Hooks

Additional Hooks provide more advanced functionality.

  • useReducer Hook : The useReducer Hook is an alternative to useState. It is useful when state logic is complex.
import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
}
  • useRef Hook : The useRef Hook is used to access DOM elements or store values without re-rendering.
import React, { useRef } from "react";

function FocusInput() {
  const inputRef = useRef();

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        Focus Input
      </button>
    </div>
  );
}
  • useMemo Hook : The useMemo Hook is used to optimize performance by memoizing values.

Example:

import React, { useMemo } from "react";

function Calculation({ numbers }) {
  const total = useMemo(() => {
    console.log("Heavy calculation running...");
    return numbers.reduce((sum, n) => sum + n, 0);
  }, [numbers]);

  return <p>Total: {total}</p>;
}
  • useCallback Hook : The useCallback Hook memoizes functions to prevent unnecessary re-renders.

Example:

import React, { useCallback } from "react";

function Button({ onClick }) {
  return <button onClick={onClick}>Click</button>;
}

function App() {
  const handleClick = useCallback(() => {
    console.log("Clicked");
  }, []);

  return <Button onClick={handleClick} />;
}
  • useLayoutEffect Hook : The useLayoutEffect Hook works like useEffect but runs synchronously after DOM updates. It is mainly used for layout calculations.
  • useImperativeHandle Hook : The useImperativeHandle Hook allows you to customize ref behavior when using forwardRef.

Custom Hooks

Custom Hooks allow you to reuse logic across multiple components. A custom Hook is simply a function that starts with use.

import { useState } from "react";

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

Using the custom Hook:

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Why Hooks Are Important in ReactJS

Hooks provide many benefits:

  • Cleaner and shorter code
  • Better logic reuse
  • No need for class components
  • Easier testing and maintenance
  • Improved performance when used correctly

When to Use Which Hook

  • Use useState for simple state
  • Use useEffect for side effects
  • Use useReducer for complex state logic
  • Use useContext to avoid prop drilling
  • Use useMemo and useCallback for performance
  • Use Custom Hooks for reusable logic

React Hooks have made React development easier and more powerful. By understanding the different types of Hooks in ReactJS, you can write clean, efficient, and reusable code.

If you are learning React or already working on React projects, mastering Hooks is a must. Start with basic Hooks like useState and useEffect, then slowly move to advanced and custom Hooks.

With proper use of Hooks, your React applications will be more scalable, readable, and maintainable.

Scroll to Top