React Development

Custom Hooks - Reusing Stateful Logic

3 min read
Focus: REACT
⚡

TL;DR — Quick Summary

  • Custom Hooks - Reusing Stateful Logic is a foundational concept every developer must understand deeply.
  • The core idea involves understanding how the underlying mechanism works and when to apply it.
  • Avoid common pitfalls by following industry best practices from day one.
  • This concept is heavily tested in technical interviews at top companies.

Lesson Overview

Custom Hooks are a mechanism to reuse stateful logic. Previously, in class components, developers used Higher-Order Components (HOCs) or Render Props to share logic. Custom Hooks offer a much cleaner, more composable approach.

A custom Hook is a JavaScript function whose name starts with 'use' and that may call other Hooks.

Conceptual Deep Dive

By convention, a custom Hook starts with 'use' so that React can automatically check for violations of the Rules of Hooks.

Custom hooks allow you to:
- Share logic across multiple components
- Keep components clean and focused on rendering
- Test logic independently from UI

Each call to a Hook gets isolated state. Custom Hooks don't share state itself, they share stateful logic. If you need to share state between components, you'll need a state management solution like Context or Redux.

Implementation Lab

useFetch Hook for API Calls
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { useState, useEffect } from 'react';
 
export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const abortController = new AbortController();
 
    setLoading(true);
    fetch(url, { signal: abortController.signal })
      .then(res => {
        if (!res.ok) throw Error('Could not fetch data for that resource'for that resource');
        return res.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
        setError(null);
      })
      .catch(err => {
        if (err.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setLoading(false);
          setError(err.message);
        }
      });
 
    return () => abortController.abort();
  }, [url]);
 
  return { data, loading, error };
}
 
// Usage:
function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(/api/users/$userId);
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>{user.name}</div>;
}

Pro Tips — Senior Dev Insights

1

Senior devs know that mastering Custom Hooks - Reusing Stateful Logic comes from building real projects, not just reading docs.

2

In large codebases, consistency in how you apply Custom Hooks - Reusing Stateful Logic patterns matters more than perfection.

3

Use debugging tools aggressively — understanding what's happening internally is the fastest way to level up.

Common Developer Pitfalls

!

Not understanding the underlying mechanics of Custom Hooks - Reusing Stateful Logic before using it in production.

!

Ignoring edge cases and error handling, leading to unpredictable behavior.

!

Over-engineering simple solutions when a straightforward approach works best.

!

Not reading the official documentation and relying on outdated Stack Overflow answers.

Interview Mastery

A custom Hook is a JavaScript function whose name starts with 'use' and that may call other Hooks. It's a pattern used to extract and share stateful logic across multiple components.

No. Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated.

Real-World Blueprint

"A massive global application like Netflix or Uber employs Custom Hooks - Reusing Stateful Logic within their core architecture to manage state, data consistency, or UI rendering securely and at unimaginable scale."

Hands-on Lab Exercises

1

Create a useLocalStorage hook that syncs state to browser local storage.

2

Build a useDebounce hook to delay updating a value (useful for search inputs).

Real-World Practice Scenarios

Abstracting complex form state and validation logic into a useForm hook.

Handling global authentication state and auto-login logic with a useAuth hook.

Deepen Your Knowledge

React Docs: Reusing Logic with Custom Hooks