Why custom hooks are used in React - Why It Works This Way

Overview - Why custom hooks are used

What is it?

Custom hooks in React are special functions that let you reuse stateful logic across different components. They start with the word 'use' and can call other hooks inside them. Instead of repeating the same code in many places, you write it once in a custom hook and use it wherever needed. This makes your code cleaner and easier to manage.

Why it matters

Without custom hooks, developers often copy and paste the same logic in multiple components, which leads to mistakes and harder maintenance. Custom hooks solve this by letting you share logic like fetching data, handling forms, or managing timers in one place. This saves time, reduces bugs, and makes apps easier to update and understand.

Where it fits

Before learning custom hooks, you should understand React functional components and built-in hooks like useState and useEffect. After mastering custom hooks, you can explore advanced patterns like context hooks, reducer hooks, and building reusable component libraries.

Mental Model

Core Idea

Custom hooks are like reusable recipes that package common React logic so you can use it easily in many components.

Think of it like...

Imagine you love baking cookies and have a special recipe you use often. Instead of writing the recipe on a new paper every time, you keep it in a recipe card. Whenever you want to bake, you just pull out the card and follow it. Custom hooks are like that recipe card for your React logic.

┌───────────────┐
│ Custom Hook   │
│ (Reusable    │
│  Logic)      │
└──────┬────────┘
       │
       ▼
┌───────────────┐   ┌───────────────┐
│ Component A   │   │ Component B   │
│ Uses Custom   │   │ Uses Custom   │
│ Hook         │   │ Hook         │
└───────────────┘   └───────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding React Hooks Basics

Concept: Learn what React hooks are and how they let you add state and side effects in functional components.

React hooks like useState and useEffect let you add features like state and lifecycle events inside functional components without classes. For example, useState lets you keep track of a counter value and update it when a button is clicked.

Result

You can write components that remember data and react to changes without using class components.

Understanding hooks is essential because custom hooks build on these basic hooks to share logic.

2

Foundation

Recognizing Repeated Logic in Components

Concept: Identify when multiple components use the same logic, which signals a chance to create a custom hook.

Imagine two components both fetch user data and handle loading states. Both have similar code for fetching and error handling. This repetition is a sign that the logic can be extracted into a reusable function.

Result

You see duplicated code that can be simplified and shared.

Spotting repeated logic helps you know when to create a custom hook to avoid duplication.

3

Intermediate

Creating a Simple Custom Hook

🤔Before reading on: do you think a custom hook can return state and functions like a component? Commit to your answer.

Concept: Learn how to write a custom hook that uses built-in hooks and returns useful values or functions.

A custom hook is a function starting with 'use'. Inside, you can use useState, useEffect, or other hooks. For example, a useCounter hook can keep count and provide increment and decrement functions. Components can call useCounter to get this logic.

Result

You get a reusable function that packages state and behavior, which components can use easily.

Knowing that custom hooks return values like state and functions makes them powerful tools for sharing logic.

4

Intermediate

Sharing Side Effects with Custom Hooks

🤔Before reading on: can custom hooks handle side effects like data fetching? Commit to your answer.

Concept: Custom hooks can manage side effects such as fetching data or subscribing to events, just like useEffect inside components.

For example, a useFetch hook can take a URL, fetch data when the component mounts, and return loading, error, and data states. This logic can be reused in many components that need to fetch data.

Result

You can reuse complex side effect logic without rewriting it in every component.

Understanding that custom hooks can handle side effects expands their usefulness beyond simple state.

5

Advanced

Composing Multiple Hooks Inside Custom Hooks

🤔Before reading on: do you think custom hooks can use other custom hooks inside them? Commit to your answer.

Concept: Custom hooks can call other hooks, including other custom hooks, to build complex reusable logic layers.

For example, a useUserProfile hook might use useFetch to get user data and use another custom hook to manage user preferences. This composition keeps code modular and clean.

Result

You can build layered abstractions that simplify complex logic sharing.

Knowing that hooks compose lets you build scalable and maintainable logic structures.

6

Expert

Avoiding Pitfalls with Custom Hook Rules

🤔Before reading on: do you think you can call hooks conditionally inside custom hooks? Commit to your answer.

Concept: Hooks must follow rules like always being called at the top level and not inside conditions to work correctly.

React relies on the order of hook calls to manage state. Calling hooks conditionally breaks this order and causes bugs. Custom hooks must also follow these rules to avoid errors.

Result

You write custom hooks that work reliably and avoid hard-to-debug issues.

Understanding hook rules prevents common mistakes that can crash your app or cause inconsistent behavior.

Under the Hood

React keeps track of hooks by their call order during each render. When you use a custom hook, React treats it like a function that calls other hooks in a fixed order. This lets React associate state and effects with the right component instance. Custom hooks are just JavaScript functions but must follow hook rules so React can manage their state correctly.

Why designed this way?

React hooks were designed to simplify stateful logic in functional components and avoid class complexities. Custom hooks extend this by letting developers share logic without repeating code. The rules about call order ensure React can reliably track state across renders, preventing bugs that were common in older patterns.

Component Render
   │
   ▼
┌───────────────┐
│ Calls Custom  │
│ Hook Function │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Calls Built-in│
│ Hooks (useState,
│ useEffect, etc)│
└──────┬────────┘
       │
       ▼
React Hook State
 Management Tracks
 State by Call Order

Myth Busters - 4 Common Misconceptions

Quick: Do you think custom hooks are special React components? Commit yes or no.

Common Belief: Custom hooks are just like components but with a different name.

Reality: Custom hooks are plain JavaScript functions that use hooks inside them; they do not render UI or behave like components.

Why it matters: Confusing hooks with components can lead to misuse, such as trying to render a hook or misunderstanding their purpose.

Quick: Can you call hooks conditionally inside a custom hook? Commit yes or no.

Common Belief: You can call hooks anywhere inside a custom hook, even inside if statements or loops.

Reality: Hooks must be called unconditionally and always in the same order to keep React's state tracking consistent.

Why it matters: Breaking this rule causes bugs and errors that are hard to debug and can crash your app.

Quick: Do you think custom hooks automatically improve performance? Commit yes or no.

Common Belief: Using custom hooks always makes your app faster.

Reality: Custom hooks help organize code but do not inherently optimize performance; inefficient logic inside hooks can still slow apps.

Why it matters: Assuming hooks improve speed can lead to ignoring real performance issues in your code.

Quick: Do you think custom hooks can only be used once per component? Commit yes or no.

Common Belief: You can only use a custom hook once in a component.

Reality: You can call the same custom hook multiple times in a component to manage separate pieces of logic or state.

Why it matters: Believing this limits your design options and prevents flexible reuse of logic.

Expert Zone

1

Custom hooks can encapsulate not only state and effects but also complex event handling and subscriptions, making them powerful for abstraction.

2

Naming conventions and clear API design in custom hooks are crucial for maintainability and developer experience in large codebases.

3

Custom hooks can be combined with context providers to share global state and logic efficiently across many components.

When NOT to use

Avoid custom hooks when the logic is very simple and used only once, as abstraction can add unnecessary complexity. For global state, consider context or state management libraries instead. Also, do not use custom hooks to replace component responsibilities like rendering UI.

Production Patterns

In real-world apps, custom hooks are used for data fetching with caching, form handling with validation, animation control, and integrating third-party APIs. Teams often create shared hook libraries to enforce consistent patterns and reduce bugs.

Connections

Functional Programming

Custom hooks build on the idea of pure functions and composition from functional programming.

Understanding functional programming helps grasp how custom hooks compose logic without side effects leaking, improving code reuse.

Software Design Patterns

Custom hooks are similar to the 'Decorator' and 'Strategy' patterns by encapsulating behavior and making it reusable.

Recognizing these patterns clarifies why custom hooks improve modularity and flexibility in React apps.

Modular Cooking Recipes

Like modular recipes that combine ingredients and steps reusable in many dishes, custom hooks combine logic reusable in many components.

This cross-domain view highlights the value of abstraction and reuse in both cooking and coding.

Common Pitfalls

#1 Calling hooks conditionally inside a custom hook.

Wrong approach:

function useExample(condition) {
if (condition) {
const [state, setState] = useState(0); // Wrong: hook inside if
}
}

Correct approach:

function useExample(condition) {
const [state, setState] = useState(0); // Always called
if (condition) {
// Use state or effects conditionally, not hooks
}
}

Root cause:

Misunderstanding that hooks must be called in the same order every render to keep React's state consistent.

#2 Trying to render a custom hook as a component.

Wrong approach:

Correct approach:

const data = useCustomHook(); // Call inside a component
return {data};

Root cause:

Confusing custom hooks with React components that return JSX.

#3 Duplicating logic instead of creating a custom hook.

Wrong approach:

function ComponentA() {
const [count, setCount] = useState(0);
// ...
}
function ComponentB() {
const [count, setCount] = useState(0);
// ...
}

Correct approach:

function useCounter() {
const [count, setCount] = useState(0);
return { count, setCount };
}
function ComponentA() {
const { count, setCount } = useCounter();
// ...
}
function ComponentB() {
const { count, setCount } = useCounter();
// ...
}

Root cause:

Not recognizing opportunities to abstract repeated logic into reusable hooks.

Key Takeaways

Custom hooks let you package and reuse React logic like state and side effects across components.

They are plain functions that follow hook rules to keep React's state management consistent.

Using custom hooks reduces code duplication, making apps easier to maintain and less error-prone.

Hooks must always be called in the same order and never conditionally to avoid bugs.

Expert use of custom hooks involves composing them, designing clear APIs, and combining with context for scalable apps.