Custom hook best practices in React - Deep Dive

Overview - Custom hook best practices

What is it?

A custom hook in React is a reusable function that lets you share logic between components. It starts with the word 'use' and can call other hooks inside it. Custom hooks help keep your code clean and organized by extracting common behaviors. They behave like normal hooks but are made by you to fit your app's needs.

Why it matters

Without custom hooks, you would repeat the same code in many components, making your app harder to maintain and update. Custom hooks solve this by letting you write logic once and reuse it everywhere. This saves time, reduces bugs, and makes your app easier to understand and grow. Imagine fixing a bug in one place instead of many!

Where it fits

Before learning custom hooks, you should understand React hooks like useState and useEffect. After mastering custom hooks, you can explore advanced patterns like context hooks, reducer hooks, and building libraries of reusable hooks.

Mental Model

Core Idea

A custom hook is a special function that bundles reusable React logic so components can share behavior easily.

Think of it like...

Think of a custom hook like a kitchen gadget you build yourself to make cooking easier. Instead of chopping vegetables by hand every time, you create a tool that does it for you, so you can use it whenever you cook.

┌───────────────┐
│ React Component│
└──────┬────────┘
       │ uses
┌──────▼────────┐
│ Custom Hook   │
│ (reusable    │
│ logic bundle)│
└──────┬────────┘
       │ calls
┌──────▼────────┐
│ React Hooks   │
│ (useState,   │
│ useEffect...)│
└──────────────┘

Build-Up - 7 Steps

1

Foundation

What is a Custom Hook

Concept: Introduce the idea of a custom hook as a function that uses React hooks to share logic.

In React, hooks like useState let you add state to components. A custom hook is a function you write that uses these hooks inside it. It always starts with 'use' to follow React rules. For example, you can make a useCounter hook that manages a number and how to increase it.

Result

You get a reusable function that components can call to share the same state logic.

Understanding that custom hooks are just functions using hooks helps you see them as simple building blocks, not magic.

2

Foundation

Rules of Hooks Apply to Custom Hooks

Concept: Explain that custom hooks must follow React's rules for hooks to work correctly.

React requires hooks to be called only at the top level of a function and only inside React functions or other hooks. Custom hooks follow the same rules. This means you cannot call hooks conditionally inside a custom hook or outside React functions.

Result

Your custom hooks work reliably without breaking React's rendering behavior.

Knowing that custom hooks obey the same rules prevents bugs and keeps React's state consistent.

3

Intermediate

Naming and Structure Best Practices

🤔Before reading on: Do you think custom hooks can have any name or must start with 'use'? Commit to your answer.

Concept: Teach the importance of naming custom hooks starting with 'use' and structuring them clearly.

Custom hooks must start with 'use' so React can identify them as hooks. This helps tools and React itself enforce rules. Also, keep your custom hooks focused on one task, like fetching data or managing form input. This makes them easier to test and reuse.

Result

Your custom hooks are easy to recognize, maintain, and less error-prone.

Following naming conventions and single responsibility makes your codebase scalable and easier for others to understand.

4

Intermediate

Handling Side Effects and Cleanup

🤔Before reading on: Should cleanup logic be inside or outside a custom hook? Commit to your answer.

Concept: Show how to manage side effects and cleanup inside custom hooks using useEffect.

If your custom hook uses side effects like timers or subscriptions, use useEffect inside it. Return a cleanup function to clear timers or unsubscribe when the component unmounts. This keeps your components clean and prevents memory leaks.

Result

Your custom hooks manage resources properly and avoid bugs related to leftover effects.

Knowing how to handle cleanup inside custom hooks ensures your app stays performant and bug-free.

5

Intermediate

Sharing State Between Components

Concept: Explain how custom hooks can share stateful logic without sharing state itself.

Custom hooks let multiple components use the same logic, but each call to a custom hook has its own state. This means components don't share state unless you use context or other methods. Custom hooks are about sharing behavior, not data.

Result

You avoid unintended shared state bugs while reusing logic.

Understanding this distinction helps you design hooks that are safe and predictable.

6

Advanced

Composing Custom Hooks for Complex Logic

🤔Before reading on: Can custom hooks call other custom hooks? Commit to your answer.

Concept: Teach how to build complex behaviors by combining multiple custom hooks.

Custom hooks can call other custom hooks inside them. This lets you build layered logic, like a useAuth hook that uses useFetch and useLocalStorage hooks. Composition keeps code modular and easier to test.

Result

You create powerful, reusable logic blocks that stay organized.

Knowing that hooks compose like functions unlocks advanced patterns and cleaner code.

7

Expert

Avoiding Common Pitfalls and Performance Issues

🤔Before reading on: Do you think every custom hook call always triggers a re-render? Commit to your answer.

Concept: Reveal subtle performance traps and how to optimize custom hooks.

Custom hooks run on every render of the component using them. If your hook creates new objects or functions inside, it can cause unnecessary re-renders. Use useMemo or useCallback inside your custom hook to memoize values and functions. Also, avoid heavy computations directly in the hook body.

Result

Your app runs smoothly without wasted renders or slowdowns.

Understanding React's rendering and memoization inside hooks prevents subtle bugs and performance problems.

Under the Hood

Custom hooks are plain JavaScript functions that call React hooks internally. React tracks hook calls by their order during rendering. When a component renders, React runs the custom hook function, which runs its internal hooks in the same order. This lets React maintain state and effects correctly for each component instance. The 'use' prefix signals React and tools to apply hook rules and linting.

Why designed this way?

React designed hooks to be composable functions to avoid complex class components and enable reusable logic. Custom hooks extend this by letting developers bundle hook calls into reusable units. The 'use' naming convention was chosen to help React enforce rules and improve developer experience. Alternatives like higher-order components or render props were more verbose and harder to compose.

Component Render
    │
    ▼
┌───────────────┐
│ Custom Hook   │
│ (calls hooks) │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ React Hooks   │
│ (useState,    │
│ useEffect...) │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ React Engine  │
│ (tracks state,│
│ manages render│
│ order)        │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do custom hooks share state between components by default? Commit to yes or no.

Common Belief: Custom hooks share state between all components that use them.

Reality: Each component calling a custom hook gets its own independent state; custom hooks share logic, not state.

Why it matters: Assuming shared state leads to bugs where components unexpectedly affect each other, causing confusing behavior.

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

Common Belief: You can call hooks inside a custom hook anywhere, even conditionally.

Reality: Hooks must be called unconditionally and at the top level inside custom hooks to keep React's hook order consistent.

Why it matters: Breaking this rule causes React errors and unpredictable state bugs.

Quick: Does naming a function starting with 'use' automatically make it a hook? Commit to yes or no.

Common Belief: Any function starting with 'use' is a hook and can use other hooks inside.

Reality: Only functions that call React hooks inside are custom hooks; naming is a convention to help React and tools detect hooks.

Why it matters: Misusing the naming can confuse developers and linting tools, leading to maintenance issues.

Quick: Do custom hooks always improve performance? Commit to yes or no.

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

Reality: Custom hooks can cause extra renders if not optimized, especially if they create new objects or functions each render.

Why it matters: Ignoring performance can lead to slow apps and hard-to-find bugs.

Expert Zone

1

Custom hooks can encapsulate not only state but also side effects and subscriptions, making them powerful for complex logic separation.

2

Memoization inside custom hooks is subtle; you must memoize values and callbacks returned by the hook to prevent unnecessary re-renders in consuming components.

3

Custom hooks can be combined with context to share global state while keeping local logic reusable and testable.

When NOT to use

Avoid custom hooks when the logic is very simple or used only once; in such cases, inline hooks in components are clearer. For global state sharing, consider context or state management libraries instead of relying solely on custom hooks.

Production Patterns

In production, custom hooks are often organized into libraries by feature (e.g., useAuth, useFetch). They are tested independently and combined to build complex UI behaviors. Teams enforce naming and structure conventions to keep hooks consistent and maintainable.

Connections

Functional Programming

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

Understanding how functions compose and avoid side effects helps write clean, reusable custom hooks.

Design Patterns - Decorator

Custom hooks can be seen as decorators that add behavior to components without changing their code.

Seeing custom hooks as decorators clarifies how they extend component functionality elegantly.

Modular Design in Engineering

Custom hooks reflect modular design principles by encapsulating reusable logic into independent units.

Recognizing this connection helps appreciate the importance of separation of concerns and reusability in software.

Common Pitfalls

#1 Calling hooks conditionally inside a custom hook.

Wrong approach:

function useExample(flag) {
if (flag) {
useState(0);
}
}

Correct approach:

function useExample(flag) {
const state = useState(0);
if (!flag) {
// ignore state but hook is always called
}
return state;
}

Root cause:

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

#2 Naming a function 'useSomething' but not calling any hooks inside.

Wrong approach:

function useFake() {
return 42;
}

Correct approach:

function useReal() {
const [count, setCount] = useState(0);
return [count, setCount];
}

Root cause:

Confusing naming convention with actual hook behavior; 'use' prefix signals a hook but does not create one.

#3 Creating new objects or functions inside custom hooks without memoization causing re-renders.

Wrong approach:

function useData() {
const data = { value: Math.random() };
return data;
}

Correct approach:

function useData() {
const data = useMemo(() => ({ value: Math.random() }), []);
return data;
}

Root cause:

Not realizing that returning new references each render triggers React to think data changed, causing extra renders.

Key Takeaways

Custom hooks are reusable functions that bundle React hook logic to share behavior across components.

They must follow React's rules of hooks, including naming starting with 'use' and calling hooks unconditionally.

Custom hooks share logic but not state between components, preventing unintended shared state bugs.

Proper handling of side effects and cleanup inside custom hooks keeps apps performant and bug-free.

Advanced use includes composing hooks and optimizing with memoization to avoid unnecessary renders.

Practice

1. Which of the following is a best practice when naming a custom React hook?

easy

A. Start the hook name with use to follow React conventions

B. Name the hook with a capital letter but no prefix

C. Use any name as long as it describes the functionality

D. Prefix the hook name with hook instead of use

Solution

1. Step 1: Understand React hook naming conventions

   React requires custom hooks to start with use so React can identify them as hooks.

2. Step 2: Evaluate the options

   Only Start the hook name with use to follow React conventions correctly follows this convention by starting the name with use.

3. Final Answer:

   Start the hook name with use to follow React conventions -> Option A

4. Quick Check:

   Hook names start with 'use' = B [OK]

Hint: Always start custom hook names with 'use' [OK]

Common Mistakes:

• Naming hooks without 'use' prefix
• Using 'hook' prefix instead of 'use'
• Starting hook names with lowercase letters without 'use'

2. Which of the following is the correct syntax to define a custom hook that returns a count state and an increment function?

easy

A. function useCount() { const [count, setCount] = useState(0); return { count increment: () => setCount(count + 1) }; }

B. function countHook() { const [count, setCount] = useState(0); return [count, () => setCount(count + 1)]; }

C. function useCount() { const [count, setCount] = useState(0); return [count, () => setCount(count + 1)]; }

D. function useCount() { const count = 0; function increment() { count += 1; } return { count, increment }; }

Solution

1. Step 1: Check the hook naming and return type

   The hook must start with use and return state and updater properly. function useCount() { const [count, setCount] = useState(0); return [count, () => setCount(count + 1)]; } uses useCount and returns an array with count and increment function.

2. Step 2: Verify state management correctness

   function useCount() { const [count, setCount] = useState(0); return [count, () => setCount(count + 1)]; } uses useState correctly and returns a function that updates state with setCount(count + 1). This is the correct pattern.

3. Final Answer:

   function useCount() { const [count, setCount] = useState(0); return [count, () => setCount(count + 1)]; } -> Option C

4. Quick Check:

   Custom hook syntax with useState and return array = C [OK]

Hint: Custom hooks return state and updater, named starting with 'use' [OK]

Common Mistakes:

• Not starting function name with 'use'
• Returning object instead of array without reason
• Not using useState for state management
• Mutating state directly instead of using setter

3. Given this custom hook code:

function useToggle(initial) {
  const [on, setOn] = useState(initial);
  const toggle = () => setOn(prev => !prev);
  return [on, toggle];
}

function Component() {
  const [isOn, toggle] = useToggle(false);
  toggle();
  return 
{isOn ? 'ON' : 'OFF'}
;
}

What will the component render after calling toggle() once?

medium

A. ON

B. false

C. OFF

D. Error because toggle is called outside an event

Solution

1. Step 1: Analyze where toggle is called

   toggle() is called directly in the component body, which executes during every render phase.

2. Step 2: Understand React render rules

   State updates during render trigger re-renders. Since toggle() is unconditional, it flips state every render, causing an infinite loop. React prohibits this and produces errors/warnings (e.g., "Cannot update a component while rendering a different component" or too many re-renders).

3. Final Answer:

   Error because toggle is called outside an event -> Option D

4. Quick Check:

   State updaters only in events/effects, not render body [OK]

Hint: Never call state updaters during render; use events or useEffect [OK]

Common Mistakes:

• Assuming async update shows initial state without considering re-render loop
• Expecting 'ON' due to toggle flip
• Confusing boolean with string output
• Thinking render body calls are safe without infinite loop

4. What is wrong with this custom hook code?

function useCounter() {
  let count = 0;
  const increment = () => { count += 1; };
  return { count, increment };
}

medium

A. It does not use React state, so count won't trigger re-renders

B. The hook name should not start with 'use'

C. The increment function should not modify count

D. It should return an array, not an object

Solution

1. Step 1: Check state management in the hook

   The hook uses a local variable count that resets to 0 on every call. It does not use useState, so React won't track changes or re-render.

2. Step 2: Understand React state importance

   Without useState, updating count does not cause component updates, making the hook ineffective.

3. Final Answer:

   It does not use React state, so count won't trigger re-renders -> Option A

4. Quick Check:

   Local variable won't update UI without useState [OK]

Hint: Always use useState for reactive state in hooks [OK]

Common Mistakes:

• Using local variables instead of useState
• Expecting UI to update without state
• Returning object instead of array (not always wrong)
• Misnaming hook without 'use' prefix

5. You want to create a custom hook useFetch that fetches data from a URL and returns loading state, data, and error. Which approach follows best practices?

hard

A. Fetch data directly in the hook body without useEffect, return data and error only

B. Use useEffect inside the hook to fetch data on mount, use useState for loading, data, and error, and return them as an object

C. Use useMemo to fetch data and return loading and data states

D. Fetch data outside the hook and pass it as a parameter to the hook

Solution

1. Step 1: Understand data fetching in hooks

   Fetching data should happen inside useEffect to avoid running on every render. State variables track loading, data, and error.

2. Step 2: Evaluate options for best practice

   Use useEffect inside the hook to fetch data on mount, use useState for loading, data, and error, and return them as an object correctly uses useEffect and useState to manage asynchronous fetch and returns all relevant states as an object for clarity.

3. Final Answer:

   Use useEffect inside the hook to fetch data on mount, use useState for loading, data, and error, and return them as an object -> Option B

4. Quick Check:

   Fetch in useEffect with state management = A [OK]

Hint: Fetch inside useEffect, manage state with useState [OK]

Common Mistakes:

• Fetching data directly in hook body causing infinite loops
• Not managing loading or error states
• Using useMemo for side effects
• Passing fetched data as parameter instead of fetching inside hook