React Custom Hooks Complete Guide

Table of Contents

1. Introduction to Custom Hooks
2. Creating a Simple Custom Hook
3. Using State in a Custom Hook
4. Using Effects in a Custom Hook
5. Combining Hooks

1. Introduction to Custom Hooks

What are Custom Hooks?

Custom Hooks in React let you extract component logic into reusable functions. While React comes with several built-in hooks like useState, useEffect, etc., you can also create your own hooks. A custom Hook is a JavaScript function whose name starts with use and that can call other Hooks.

Why Use Custom Hooks?

• Reusability: By extracting logic into a custom hook, you can reuse it across different components.
• Simplification: Custom hooks can make your components cleaner and more maintainable.
• Encapsulation: You can encapsulate the logic and expose only what's necessary to other components.

2. Creating a Simple Custom Hook

Let's start with a very basic example. Imagine you have a simple counter component, and you want to extract the counter logic into a custom hook.

Component with Logic

import React, { useState } from 'react';

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

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

export default Counter;

Create a Custom Hook

Let's extract the counter logic into a hook named useCounter.

import { useState } from 'react';

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

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

    return { count, increment, decrement };
}

export default useCounter;

Use the Custom Hook in Component

Now, use the useCounter hook in your Counter component.

import React from 'react';
import useCounter from './useCounter';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
}

export default Counter;

Benefits

• Reusability: You can use the useCounter hook in any other component where you need a counter.
• Cleaner Code: The Counter component is now cleaner, and all the counter logic is encapsulated in the custom hook.

3. Using State in a Custom Hook

The previous example already covered using state in a custom hook with useState. Here's another example where we'll create a custom hook to manage form input state.

Form Component

import React, { useState } from 'react';

function Form() {
    const [formData, setFormData] = useState({ name: '', email: '' });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData((prev) => ({ ...prev, [name]: value }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Form Data:', formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>Name:</label>
                <input
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                />
            </div>
            <div>
                <label>Email:</label>
                <input
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                />
            </div>
            <button type="submit">Submit</button>
        </form>
    );
}

export default Form;

Extract Logic into Custom Hook

Create a custom hook named useForm to manage form state.

import { useState } from 'react';

function useForm(initialState = {}) {
    const [values, setValues] = useState(initialState);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setValues((prev) => ({ ...prev, [name]: value }));
    };

    const resetForm = () => {
        setValues(initialState);
    };

    return { values, handleChange, resetForm };
}

export default useForm;

Use the Custom Hook in Component

Now, use the useForm hook in your Form component.

import React from 'react';
import useForm from './useForm';

function Form() {
    const { values, handleChange, resetForm } = useForm({ name: '', email: '' });

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Form Data:', values);
        resetForm();
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>Name:</label>
                <input
                    type="text"
                    name="name"
                    value={values.name}
                    onChange={handleChange}
                />
            </div>
            <div>
                <label>Email:</label>
                <input
                    type="email"
                    name="email"
                    value={values.email}
                    onChange={handleChange}
                />
            </div>
            <button type="submit">Submit</button>
        </form>
    );
}

export default Form;

Benefits

• Modularity: The form handling logic is now modular and can be reused across different form components.
• Maintainability: Easier to maintain and less verbose components.

4. Using Effects in a Custom Hook

Effects in custom hooks can be used for side effects like data fetching, subscriptions, or manually changing the DOM from React components.

Fetching Data

Let's create a custom hook to fetch data from an API.

Component with Fetch Logic

import React, { useEffect, useState } from 'react';

function DataFetcher() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts/1')
            .then((response) => response.json())
            .then((data) => {
                setData(data);
                setLoading(false);
            })
            .catch((error) => {
                setError(error);
                setLoading(false);
            });
    }, []); // Empty dependency array for one-time fetch

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            <h1>{data.title}</h1>
            <p>{data.body}</p>
        </div>
    );
}

export default DataFetcher;

Extract Logic into Custom Hook

Create a custom hook named useFetchData.

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        fetch(url)
            .then((response) => response.json())
            .then((data) => {
                setData(data);
                setLoading(false);
            })
            .catch((error) => {
                setError(error);
                setLoading(false);
            });
    }, [url]); // Dependency array for re-fetching when URL changes

    return { data, loading, error };
}

export default useFetchData;

Use the Custom Hook in Component

Now, use the useFetchData hook in your DataFetcher component.

import React from 'react';
import useFetchData from './useFetchData';

function DataFetcher() {
    const { data, loading, error } = useFetchData('https://jsonplaceholder.typicode.com/posts/1');

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            <h1>{data.title}</h1>
            <p>{data.body}</p>
        </div>
    );
}

export default DataFetcher;

Benefits

• Reusability: You can use the useFetchData hook in any component where you need to fetch data from an API.
• Maintainability: The API fetching logic is encapsulated, making it easier to maintain.

5. Combining Hooks

You can combine multiple custom hooks within a component to encapsulate different pieces of logic.

Example: A Todo App

Let's create a todo app that uses custom hooks for state management, form handling, and data fetching.

State Management Hook

Create a custom hook useTodoState to manage todo state.

import { useState } from 'react';

function useTodoState(initialTodos = []) {
    const [todos, setTodos] = useState(initialTodos);

    const addTodo = (todo) => {
        setTodos([...todos, todo]);
    };

    const removeTodo = (id) => {
        setTodos(todos.filter((todo) => todo.id !== id));
    };

    const toggleTodo = (id) => {
        setTodos(
            todos.map((todo) =>
                todo.id === id ? { ...todo, completed: !todo.completed } : todo
            )
        );
    };

    return { todos, addTodo, removeTodo, toggleTodo };
}

export default useTodoState;

Form Handling Hook

Create a custom hook useTodoForm to handle form input state.

import { useState } from 'react';

function useTodoForm(addTodo) {
    const [value, setValue] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (value.trim()) {
            addTodo({ id: Date.now(), text: value, completed: false });
            setValue('');
        }
    };

    return { value, setValue, handleSubmit };
}

export default useTodoForm;

Data Fetching Hook

Create a custom hook useFetchTodos to fetch todo data from an API.

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        fetch(url)
            .then((response) => response.json())
            .then((data) => {
                setData(data);
                setLoading(false);
            })
            .catch((error) => {
                setError(error);
                setLoading(false);
            });
    }, [url]);

    return { data, loading, error };
}

export default useFetchTodos;

Todo App Component

Now, use all these custom hooks in your TodoApp component.

import React, { useMemo } from 'react';
import useTodoState from './useTodoState';
import useTodoForm from './useTodoForm';
import useFetchTodos from './useFetchTodos';
import TodoList from './TodoList';
import TodoForm from './TodoForm';

function TodoApp() {
    const { data, loading, error } = useFetchTodos('https://jsonplaceholder.typicode.com/todos?_limit=5');
    const { todos, addTodo, removeTodo, toggleTodo } = useTodoState(data);
    const { value, handleSubmit } = useTodoForm(addTodo);

    const memoizedTodos = useMemo(() => todos, [todos]);

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            <h1>Todo App</h1>
            <TodoForm handleSubmit={handleSubmit} value={value} />
            <TodoList
                todos={memoizedTodos}
                removeTodo={removeTodo}
                toggleTodo={toggleTodo}
            />
        </div>
    );
}

export default TodoApp;

Supporting Components

Create a TodoForm component.

import React from 'react';

function TodoForm({ handleSubmit, value }) {
    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={value}
                onChange={(e) => handleSubmit(e)}
                placeholder="Add new todo"
            />
            <button type="submit">Add</button>
        </form>
    );
}

export default TodoForm;

Create a TodoList component.

import React from 'react';

function TodoList({ todos, removeTodo, toggleTodo }) {
    return (
        <ul>
            {todos.map((todo) => (
                <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
                    {todo.text}
                    <button onClick={() => toggleTodo(todo.id)}>Toggle</button>
                    <button onClick={() => removeTodo(todo.id)}>Remove</button>
                </li>
            ))}
        </ul>
    );
}

export default TodoList;

Benefits

• Modularity: Each piece of logic is encapsulated in its own custom hook.
• Reusability: Hooks can be easily reused across different components.
• Maintainability: Easier to maintain and test individual hooks.

Conclusion

Custom hooks are a powerful feature in React that allow you to encapsulate and reuse component logic. They help in breaking down your components into smaller, reusable pieces, making your code more organized and maintainable. The examples provided above should give you a good starting point to create and use custom hooks in your React applications.

References

• React Hooks Introduction
• React Custom Hooks