Reusing logic with hooks in React - Deep Dive

Overview - Reusing logic with hooks

What is it?

Reusing logic with hooks means creating small, reusable pieces of code in React that manage state or side effects. Hooks let you share behavior between components without repeating code. Instead of copying code, you write a hook once and use it wherever needed. This makes your app easier to build and maintain.

Why it matters

Without reusable hooks, developers often copy and paste code, which leads to mistakes and harder updates. Reusable hooks save time and reduce bugs by centralizing logic. This helps teams build apps faster and keep them consistent. It also makes your code cleaner and easier to understand.

Where it fits

Before learning this, you should know basic React components and how to use built-in hooks like useState and useEffect. After mastering reusable hooks, you can explore advanced patterns like custom hooks with context or hooks for performance optimization.

Mental Model

Core Idea

Reusable hooks are like custom tools that package common React logic so you can use them easily in many components.

Think of it like...

Imagine you have a special kitchen gadget that peels apples perfectly. Instead of peeling apples by hand every time, you use this gadget whenever you need. Reusable hooks are like that gadget for your React code.

┌───────────────┐
│  React App   │
└──────┬────────┘
       │ uses
┌──────▼────────┐
│ Custom Hook 1 │
└──────┬────────┘
       │ shares logic
┌──────▼────────┐
│ Custom Hook 2 │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding React Hooks Basics

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

React hooks like useState let you add state to components without classes. useEffect lets you run code after rendering, like fetching data. These built-in hooks are the foundation for creating your own reusable hooks.

Result

You can manage state and side effects in simple React components using hooks.

Understanding built-in hooks is essential because reusable hooks build on these core capabilities.

2

Foundation

Why Reuse Logic Instead of Copying

Concept: Recognize the problems caused by copying code and the benefits of sharing logic.

Copying code between components leads to bugs and harder maintenance. If you fix a bug in one place but forget another, problems arise. Reusing logic means writing once and using many times, making updates easier and code cleaner.

Result

You see why sharing logic improves code quality and developer productivity.

Knowing the cost of duplication motivates learning reusable hooks.

3

Intermediate

Creating Your First Custom Hook

🤔Before reading on: do you think a custom hook must return JSX or can it return any value? Commit to your answer.

Concept: Learn how to write a function starting with 'use' that encapsulates state or effects and returns values or functions.

A custom hook is a JavaScript function whose name starts with 'use'. Inside, you can call built-in hooks like useState or useEffect. The hook returns data or functions that components can use. For example, a useCounter hook manages a number and provides increment and decrement functions.

Result

You can write a reusable hook that components call to share stateful logic.

Understanding that hooks are just functions that use other hooks unlocks the power of logic reuse.

4

Intermediate

Using Custom Hooks in Components

🤔Before reading on: do you think using a custom hook changes how React renders a component? Commit to your answer.

Concept: Learn how to call custom hooks inside functional components and use their returned values.

Inside a component, call your custom hook like a regular function. Use the returned state and functions to build UI. React treats hooks specially to keep state and effects consistent. Using hooks does not change rendering behavior but organizes logic better.

Result

Components become cleaner and share logic without duplication.

Knowing that hooks integrate seamlessly with React's rendering helps you trust and use them confidently.

5

Intermediate

Sharing Side Effects with Hooks

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

Concept: Custom hooks can include useEffect to handle side effects and share that logic across components.

You can write hooks that fetch data, subscribe to events, or update timers using useEffect inside them. Components using these hooks get the side effect behavior without repeating code. For example, a useWindowSize hook listens to window resize events and shares the size.

Result

Side effect logic is reusable and consistent across components.

Understanding that hooks can manage side effects expands their usefulness beyond just state.

6

Advanced

Composing Hooks for Complex Logic

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

Concept: Hooks can call other hooks to build layered, complex reusable logic.

You can build hooks that use other custom hooks inside them. This lets you compose small pieces into bigger behaviors. For example, a useAuth hook might use useUserData and useToken hooks internally. This modular approach keeps code clean and testable.

Result

You can create powerful, reusable logic by combining hooks.

Knowing hooks compose like functions helps you design scalable logic structures.

7

Expert

Avoiding Common Hook Pitfalls in Reuse

🤔Before reading on: do you think hooks can be called conditionally or inside loops? Commit to your answer.

Concept: Learn the rules of hooks and how breaking them causes bugs in reusable hooks.

Hooks must be called unconditionally and always in the same order. Calling hooks inside conditions or loops breaks React's state tracking. When writing reusable hooks, ensure they follow these rules to avoid subtle bugs. Also, be careful with dependencies in useEffect to prevent infinite loops.

Result

Reusable hooks work reliably and avoid hard-to-debug errors.

Understanding hook rules is critical to writing safe reusable logic that works in all components.

Under the Hood

React tracks hooks calls by their order during each render. When a component renders, React runs hooks in the same sequence, storing their state internally in a list. Custom hooks are just functions that call built-in hooks, so React manages their state as part of the component's hook list. This is why hooks must be called in the same order every time.

Why designed this way?

Hooks were designed to let functional components have state and side effects without classes. The call order tracking is a simple, fast way for React to associate state with hooks. Alternatives like naming hooks or using IDs were more complex and error-prone. This design keeps React fast and predictable.

Component Render
  │
  ├─ Hook Call 1 (useState)
  │    └─ React stores state slot 1
  ├─ Hook Call 2 (useEffect)
  │    └─ React stores effect slot 2
  ├─ Custom Hook
  │    ├─ Calls useState
  │    │    └─ React stores state slot 3
  │    └─ Calls useEffect
  │         └─ React stores effect slot 4
  └─ Render UI with hook states

Myth Busters - 4 Common Misconceptions

Quick: Can you call hooks inside loops or conditions? Commit to yes or no.

Common Belief: You can call hooks anywhere, including inside loops or if statements.

Reality: Hooks must be called unconditionally and always in the same order on every render.

Why it matters: Breaking this rule causes React to mix up hook states, leading to bugs that are hard to find.

Quick: Do custom hooks have to return JSX? Commit to yes or no.

Common Belief: Custom hooks must return JSX elements like components.

Reality: Custom hooks return any value or functions, not JSX. They are logic containers, not UI.

Why it matters: Confusing hooks with components leads to misuse and design mistakes.

Quick: Does using a custom hook change how React renders a component? Commit to yes or no.

Common Belief: Using custom hooks changes the rendering process or output of components.

Reality: Custom hooks do not affect rendering directly; they organize logic but React renders components as usual.

Why it matters: Misunderstanding this can cause unnecessary complexity or wrong assumptions about performance.

Quick: Can you share stateful logic between components by passing state variables directly? Commit to yes or no.

Common Belief: You can share state by passing state variables between components without hooks.

Reality: State is local to components; hooks let you share the logic to create and manage state, not the state itself.

Why it matters: Trying to share state directly causes bugs and breaks React's data flow.

Expert Zone

1

Custom hooks can encapsulate not just state but also event listeners, timers, and subscriptions, making them powerful for side effect management.

2

Hooks can be designed to accept parameters that customize their behavior, enabling flexible reuse across different scenarios.

3

Using hooks with context allows sharing global state with reusable logic, but requires careful design to avoid unnecessary re-renders.

When NOT to use

Avoid custom hooks when logic is simple and used only once; sometimes inline code is clearer. For global state, consider state management libraries like Redux or Zustand. Also, do not use hooks outside React functional components or other hooks.

Production Patterns

In real apps, teams create libraries of custom hooks for common tasks like form handling, data fetching, and animations. Hooks are combined with context providers for global state. Testing hooks with tools like React Testing Library ensures reliability. Performance optimizations include memoizing hook results and splitting hooks to minimize re-renders.

Connections

Functional Programming

Builds-on

Reusable hooks follow functional programming principles by using pure functions and avoiding side effects outside hooks, making code predictable and testable.

Design Patterns - Strategy Pattern

Similar pattern

Custom hooks encapsulate interchangeable logic like the strategy pattern, letting components choose behavior by using different hooks.

Modular Design in Engineering

Builds-on

Just as engineers build complex machines from reusable modules, developers build apps from reusable hooks, improving maintainability and scalability.

Common Pitfalls

#1 Calling hooks conditionally inside a component.

Wrong approach:

if (show) {
const count = useCounter();
}

Correct approach:

const count = useCounter();
if (show) {
// use count
}

Root cause:

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

#2 Returning JSX from a custom hook.

Wrong approach:

function useGreeting() {
return Hello;
}

Correct approach:

function useGreeting() {
const [name, setName] = useState('');
return { name, setName };
}

Root cause:

Confusing hooks with components; hooks are for logic reuse, components return JSX.

#3 Trying to share state variables directly between components without hooks.

Wrong approach:

function ComponentA() {
const [count, setCount] = useState(0);
return ;
}
function ComponentB({ count }) {
// tries to update count directly
}

Correct approach:

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

Root cause:

Not understanding React's one-way data flow and that hooks share logic, not state itself.

Key Takeaways

Reusable hooks let you write shared React logic once and use it in many components, making code cleaner and easier to maintain.

Hooks must be called in the same order every render and only inside React functional components or other hooks.

Custom hooks can manage state, side effects, and complex behaviors by composing built-in hooks.

Understanding hook rules and design patterns helps avoid bugs and build scalable React apps.

Expert use of hooks includes composing them, handling parameters, and integrating with context for global state.