React Hooks Types: A Simple Guide For Better Components

What makes React Hooks so useful?

They let you manage state and side effects in functional components without extra complexity. React Hooks types help you write cleaner and more readable code.

This blog breaks down different hooks, their uses, and best practices. You'll also learn how to keep your components fast and maintainable.

Let's get started!

What are React Hooks?

React Hooks allows developers to manage state and lifecycle methods within functional components. Before hooks, stateful logic was only possible using class components. Now, hooks make it easier to manage local state, fetch data, and encapsulate reusable logic in a structured manner.

Types of React Hooks in Functional Components

React Hooks can be divided into two categories: built-in hooks and custom hooks. Built-in hooks provide direct functionality, while custom hooks encapsulate reusable logic for better code modularity.

1. Built-in React Hooks

Built-in hooks provide fundamental functionalities for managing state, side effects, and context.

1.1 useState – Managing Local State

Within functional components, the useState hook aids in local state management. The state variable and an update function are included in the array that is returned.

Example: Using useState for Counter Management

Copy
import { useState } from "react";

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

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

This hook is useful for managing component-level state, such as form inputs or UI toggles.

1.2 useEffect – Handling Side Effects

The useEffect hook is used for executing side effects, such as fetching data, subscriptions, and manually manipulating the DOM.

Example: Fetching Data with useEffect

Copy
import { useState, useEffect } from "react";

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []); // Empty dependency array ensures this runs only when the component mounts

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

The dependency array ensures that the effect runs at the right time.

1.3 useContext – Managing Global State with React Context

The useContext hook simplifies global state management within a component tree.

Example: Using useContext with Theme Context

Copy
import { useContext } from "react";
import { ThemeContext } from "./ThemeProvider";

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme }}>Themed Button</button>;
}

This approach helps share a context value like themes or user authentication across multiple components.

1.4 useReducer – Managing Complex State Logic

When state logic becomes complex, useReducer is a better choice than useState. It uses a reducer function to determine state transitions.

Example: Using useReducer for Counter

Copy
import { useReducer } from "react";

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

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: "case decrement" })}>-</button>
    </div>
  );
}

This approach is useful for managing complex state logic, especially in large applications.

2. Custom Hooks in React

Custom hooks help encapsulate reusable logic while keeping functional components clean.

2.1 Creating a Custom Hook for Data Fetching

A custom hook can be used to handle repetitive logic such as fetching data.

Example: useFetch Custom Hook

This custom hook allows components to fetch data without duplicating logic.

2.2 Using the useFetch Hook

By using own custom hooks, developers can simplify existing components and improve maintainability.

3. Optimizing Performance with React Hooks

React provides hooks like useCallback and useMemo to enhance performance by reducing re-render cycles.

3.1 useCallback – Preventing Unnecessary Function Re-Creation

A callback function inside a component is recreated on each render. useCallback ensures that the function reference remains the same unless dependencies change.

Example: Using useCallback

This prevents unnecessary re-renders of the child component.

3.2 useMemo – Memoizing Expensive Computations

useMemo optimizes performance by caching computed values.

Example: Optimizing Performance with useMemo

This approach is useful in complex components where expensive calculations can slow down performance.

4. Managing Lifecycle with useEffect

React Hooks replace traditional lifecycle methods such as componentDidMount. The useEffect hook runs logic when a component mounts.

Example: Logging When a Component Mounts

This pattern is useful for tracking re-render behavior in React function components.

Final Thoughts!

Understanding React Hooks Types is key to developing efficient functional components. Built-in hooks simplify common tasks, while custom hooks help encapsulate reusable logic. Optimizing performance with useCallback and useMemo minimizes unnecessary re-render cycles. Using hooks effectively leads to cleaner, more maintainable React applications.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error("new error: Failed to fetch data", error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [url]);

  return { data, loading };
}

export default useFetch;

import useFetch from "./useFetch";

function PostList() {
  const { data, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/posts"
  );

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

import { useState, useCallback } from "react";

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

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return <ChildComponent increment={increment} />;
}

import { useState, useMemo } from "react";

function ExpensiveCalculation({ number }) {
  const squaredNumber = useMemo(() => {
    return number * number;
  }, [number]); // Runs only when "number" changes

  return <p>Squared Number: {squaredNumber}</p>;
}

import { useEffect } from "react";

function Logger() {
  useEffect(() => {
    console.log("Component has mounted");

    return () => {
      console.log("Component unmounted");
    };
  }, []); // Runs only when the component mounts

  return <p>Check the console</p>;
}