📘 Custom Hooks in React — Complete Theory Guide

1. 📌 Introduction

🔹 What are Custom Hooks?

Custom Hooks are JavaScript functions that:

Start with the prefix use
Allow you to reuse stateful logic across multiple components

They are built using existing React hooks like:

useState
useEffect
useRef
etc.

👉 In simple terms: Custom hooks = reusable logic extracted from components

🔹 Why are Custom Hooks Important?

Without custom hooks:

Logic gets duplicated across components
Components become large and harder to maintain

With custom hooks:

Logic becomes modular and reusable
Components become clean and focused on UI

💡 Think of them as:

“Utility functions for React logic”

🔹 When and Why Do We Use Them?

Use custom hooks when:

🔁 You repeat logic across multiple components
🧠 A component has too much logic mixed with UI
🧩 You want to separate concerns (logic vs presentation)
⚙️ You want to abstract complex behavior (API calls, forms, timers)

Example Use Cases:

Fetching data (useFetch)
Form handling (useForm)
Window resize tracking (useWindowSize)
Authentication (useAuth)
Debouncing input (useDebounce)

2. ⚙️ Concepts / Internal Workings

🔹 1. Hooks are Just Functions (But with Rules)

Custom hooks:

Are plain JavaScript functions
Can call other hooks
Must follow Rules of Hooks

🔹 2. Rules of Hooks (Critical)

Only call hooks:
- At the top level (not inside loops/conditions)
Only call hooks:
- Inside React functions (components or custom hooks)

❌ Wrong:

if (condition) {
  useEffect(() => {});
}

✅ Correct:

useEffect(() => {
  if (condition) {
    // logic
  }
}, [condition]);

🔹 3. How Custom Hooks Work Internally

React internally tracks hooks using a call order system. 👉 Important idea:

React does NOT track hooks by name
It tracks them by order of execution

Example:

useState();
useEffect();

React internally:

Hook #1 → useState
Hook #2 → useEffect

So:

If order changes → React breaks ❌
That’s why hooks must always run in the same order

🔹 4. Each Hook Has Its Own State

Every time you use a custom hook:

It creates independent state instances

const count1 = useCounter();
const count2 = useCounter();

👉 These do NOT share state unless explicitly designed to

🔹 5. Relationship with Other React Features

Feature	Relationship
`useState`	Used inside custom hooks for state
`useEffect`	Used for side effects
`useContext`	Share global data
`useReducer`	Manage complex state
`useRef`	Store persistent mutable values
Components	Consume custom hooks

👉 Custom hooks are a composition layer over these primitives

3. 🧪 Syntax & Examples

🔹 Basic Syntax

function useCustomHook() {
  // use other hooks
  return something;
}

🔹 Example 1: Counter Hook

import { useState } from "react";

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

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

Usage:

function App() {
  const { count, increment } = useCounter(5);

  return <button onClick={increment}>{count}</button>;
}

🔹 Example 2: Fetch Data Hook

import { useState, useEffect } from "react";

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

  useEffect(() => {
    let isMounted = true;

    setLoading(true);

    fetch(url)
      .then(res => res.json())
      .then(data => {
        if (isMounted) {
          setData(data);
          setLoading(false);
        }
      })
      .catch(err => {
        if (isMounted) {
          setError(err);
          setLoading(false);
        }
      });

    return () => {
      isMounted = false;
    };
  }, [url]);

  return { data, loading, error };
}

🔹 Example 3: Window Size Hook

import { useState, useEffect } from "react";

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return size;
}

🔹 Example 4: Debounce Hook

import { useState, useEffect } from "react";

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(id);
  }, [value, delay]);

  return debouncedValue;
}

function SearchComponent() {
  const debouncedQuery = useDebounce(query, 500);
}

function FilterComponent() {
  const debouncedFilter = useDebounce(filter, 300);
}

👉 Same logic, different components → clean reuse

4. ⚠️ Edge Cases / Common Mistakes

🔹 1. Breaking Hook Order

❌ Problem:

if (condition) {
  useState();
}

👉 Leads to:

Bugs
State mismatch
Crashes

🔹 2. Forgetting Dependencies in `useEffect`

useEffect(() => {
  fetchData();
}, []); // ❌ might miss dependencies

👉 Leads to stale data or unexpected behavior

🔹 3. Returning Unstable Functions

return {
  increment: () => setCount(count + 1) // ❌ stale closure
};

✅ Fix:

setCount(c => c + 1);

const a = useCounter();
const b = useCounter();

👉 These are independent Not shared unless you use context

🔹 5. Memory Leaks (Async + Effects)

useEffect(() => {
  fetchData(); // ❌ may update unmounted component
}, []);

✅ Fix:

Use cleanup
Track mounted state
Use AbortController

🔹 6. Over-Abstraction

❌ Bad:

Creating hooks for trivial logic

👉 Leads to:

Hard-to-read code
Unnecessary complexity

5. ✅ Best Practices

🔹 1. Follow Naming Convention

✔ Must start with use

useAuth
useFetch
useForm

👉 Required for React to recognize hooks

🔹 2. Keep Hooks Focused

✔ One responsibility per hook ❌ Bad:

useEverything()

✔ Good:

useFetch()
useAuth()
useForm()

🔹 3. Extract Logic, Not UI

❌ Don’t:

Return JSX from hooks

✔ Do:

Return data and functions only

🔹 4. Use Functional Updates

Avoid stale state issues:

setState(prev => ...)

🔹 5. Optimize Re-renders

Use:

useCallback
useMemo

Inside hooks when needed

🔹 6. Handle Cleanup Properly

Always clean:

Event listeners
Timers
Subscriptions

return () => {
  // cleanup
};

🔹 7. Avoid Side Effects Outside Hooks

❌ Wrong:

function useSomething() {
  fetch(); // outside useEffect ❌
}

✔ Correct:

useEffect(() => {
  fetch();
}, []);

🔹 8. Test Custom Hooks

Use libraries like:

React Testing Library
Jest

Test:

State changes
Side effects

🔹 9. Document Your Hooks

Especially for teams:

/**
 * useFetch - Fetch data from API
 * @param {string} url
 */

🔹 10. Think in Composition

👉 Combine hooks:

function useUserData() {
  const { data } = useFetch("/api/user");
  const isOnline = useOnlineStatus();

  return { data, isOnline };
}

🧠 Final Mental Model

Custom hooks are logic containers
They compose React hooks
They do not share state unless designed
They make your app:
- Cleaner
- Reusable
- Scalable

🧠 Senior-Level React Interview — Custom Hooks (Conceptual Deep Dive)

1. What problem do custom hooks actually solve beyond “code reuse”?

✅ Strong Answer

Custom hooks are not just about reuse — they solve separation of concerns at the logic level. Before hooks:

Logic reuse required:
- HOCs (Higher-Order Components)
- Render props
These introduced:
- Wrapper hell
- Prop drilling complexity
- Hard-to-trace data flow

👉 Custom hooks allow:

Extracting stateful logic without altering component structure

function useAuth() {
  const [user, setUser] = useState(null);
  // logic
  return user;
}

💡 Why this matters

Keeps components focused on UI
Improves composability
Eliminates structural overhead (unlike HOCs)

🔁 Comparison

Approach	Problem
HOC	Nested wrappers
Render Props	Callback nesting
Custom Hooks	Flat + composable ✅

2. How does React internally track state for custom hooks?

✅ Strong Answer

React does not treat custom hooks differently. Internally:

React maintains a linked list of hooks per component
Hooks are identified by call order, not name

useState();   // Hook #1
useEffect();  // Hook #2

Custom hook:

function useSomething() {
  useState(); // Hook #?
}

👉 React inlines this into the component’s hook list

💡 Why this matters

Breaking order → corrupts state mapping
Explains why hooks must:
- Not be conditional
- Not be inside loops

3. Why must custom hooks follow the “use” naming convention?

✅ Strong Answer

The use prefix is not stylistic — it’s required for:

Linting enforcement (eslint-plugin-react-hooks)
Static analysis to ensure:
- Hooks are called correctly
- Rules of hooks are followed

👉 React itself doesn’t enforce naming at runtime, but tooling does.

💡 Why this matters

Without naming convention:

Bugs won’t be caught early
Hook misuse becomes silent

✅ Strong Answer

No — custom hooks do NOT share state by default. Each call:

Creates an independent state instance

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

const a = useCounter();
const b = useCounter();

👉 a and b are completely separate

💡 Why

Because:

State is tied to the component instance
Not to the hook function

Use:

useContext
External stores (Redux, Zustand)

5. When should you NOT create a custom hook?

✅ Strong Answer

Avoid custom hooks when:

Logic is trivial

const doubled = count * 2;

No reuse exists
It increases abstraction without clarity

💡 Why

Over-abstraction:

Makes debugging harder
Reduces readability

👉 Rule:

Extract only when it improves clarity OR reuse

6. How do custom hooks affect component re-renders?

✅ Strong Answer

Custom hooks do not change React’s rendering behavior. Re-render happens when:

State changes
Props change

Inside hook:

const [state, setState] = useState();

👉 Updating this triggers parent component re-render

💡 Important nuance

Returning new objects/functions:

return { value }; // new object every render ❌

👉 Causes unnecessary re-renders downstream

✅ Fix

return useMemo(() => ({ value }), [value]);

7. How do you prevent stale closures in custom hooks?

✅ Strong Answer

Stale closures occur when:

Functions capture outdated state

const increment = () => setCount(count + 1); // ❌

✅ Fix: Functional updates

setCount(c => c + 1);

💡 Why

Uses latest state snapshot
Avoids dependency issues

8. How should side effects be handled inside custom hooks?

✅ Strong Answer

Always use useEffect (or similar) ❌ Wrong:

function useData() {
  fetch("/api"); // side effect outside hook lifecycle ❌
}

✅ Correct:

useEffect(() => {
  fetch("/api");
}, []);

💡 Why

Ensures lifecycle consistency
Prevents repeated or uncontrolled execution

9. How do you design a robust data-fetching custom hook?

✅ Strong Answer

Key concerns:

Loading state
Error handling
Cancellation
Dependency control

function useFetch(url) {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const controller = new AbortController();

    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(err => {
        if (err.name !== "AbortError") throw err;
      });

    return () => controller.abort();
  }, [url]);

  return { data, loading };
}

💡 Why

Prevents:

Memory leaks
Race conditions

10. What are the trade-offs between custom hooks and context?

✅ Strong Answer

Aspect	Custom Hook	Context
State sharing	❌	✅
Reusability	✅	⚠️
Performance	Better	Can cause re-renders
Scope	Local	Global

💡 Insight

Custom hook = logic reuse
Context = state sharing

👉 Often used together

11. How do you compose multiple custom hooks safely?

✅ Strong Answer

Hooks can call other hooks:

function useUser() {
  const data = useFetch("/user");
  const isOnline = useOnlineStatus();

  return { data, isOnline };
}

⚠️ Pitfall

Order must remain consistent

💡 Why

Composition works because:

React flattens hook calls internally

12. What are common memory leak scenarios in custom hooks?

✅ Strong Answer

Async updates after unmount
Uncleaned event listeners
Timers not cleared

useEffect(() => {
  const id = setTimeout(() => {}, 1000);
  return () => clearTimeout(id);
}, []);

💡 Why

React doesn’t auto-clean side effects

13. How do you make a custom hook configurable and reusable?

✅ Strong Answer

Use parameters:

function useDebounce(value, delay = 300) {

Return flexible API:

return { value, cancel };

💡 Why

Makes hook adaptable
Avoids rewriting logic

14. When should you use `useReducer` inside a custom hook?

✅ Strong Answer

Use when:

State is complex
Multiple transitions exist

function useForm() {
  const [state, dispatch] = useReducer(reducer, initialState);
}

💡 Why

Better state predictability
Easier debugging

15. How do custom hooks interact with Suspense and concurrent features?

✅ Strong Answer

Custom hooks:

Can throw promises (for Suspense)
Must be idempotent (safe to re-run)

💡 Why

Concurrent rendering:

May call hooks multiple times
Requires side effects to be well-controlled

16. What’s the risk of returning non-memoized functions from hooks?

✅ Strong Answer

return { onClick: () => {} };

👉 New function every render → breaks memoization

✅ Fix

const onClick = useCallback(() => {}, []);
return { onClick };

💡 Why

Prevents unnecessary child re-renders

17. How do you debug issues inside custom hooks?

✅ Strong Answer

Techniques:

Add logs inside hook
Use React DevTools (inspect hooks)
Break logic into smaller hooks

💡 Advanced

React DevTools shows:

Hook state per component instance

18. What is a “hook factory” and when would you use it?

✅ Strong Answer

A function that returns a custom hook:

function createUseFeature(config) {
  return function useFeature() {
    return config;
  };
}

💡 Use case

Dynamic behavior
Multi-tenant apps
Library design

🔚 Final Thought

At a senior level, custom hooks are not just about:

Reuse

They are about:

Designing clean abstractions
Managing complexity
Ensuring predictable behavior under React’s rendering model

🧠 Senior-Level MCQs — Custom Hooks in React

1. What happens if a custom hook is called conditionally inside a component?

if (isLoggedIn) {
  useAuth();
}

Options:

A. It works fine if condition is stable B. React throws a runtime error immediately C. It may cause incorrect state mapping across renders D. It only breaks in production builds

✅ Correct Answer: C

💡 Explanation:

React relies on hook call order, not names. Conditional calls shift the order, causing:

State mismatch
Unexpected bugs

❌ Why others are wrong:

A: Even stable conditions can change → unsafe
B: React doesn’t always throw explicit errors
D: This issue is environment-independent

2. What is the real reason custom hooks must start with `use`?

Options:

A. React runtime uses it to identify hooks B. Babel transforms functions starting with use C. ESLint uses it to enforce Rules of Hooks D. It improves performance optimizations

✅ Correct Answer: C

💡 Explanation:

The use prefix enables static analysis via ESLint, ensuring:

Hooks are not used conditionally
Hooks follow rules

❌ Why others are wrong:

A: React runtime doesn’t rely on naming
B: Babel does not enforce hook behavior
D: No performance impact

Options:

A. Yes, always B. Only if hook uses useState C. No, each call creates independent state D. Only if wrapped in useMemo

✅ Correct Answer: C

💡 Explanation:

Each invocation creates a separate state instance tied to that component.

❌ Why others are wrong:

A: Incorrect assumption
B: useState doesn’t share state
D: useMemo doesn’t share state

4. What is the risk of returning a new object from a custom hook on every render?

return { value };

Options:

A. Memory leak B. Infinite loop C. Unnecessary re-renders in consuming components D. Hook order corruption

✅ Correct Answer: C

💡 Explanation:

New object reference each render → breaks shallow comparison → triggers re-renders.

❌ Why others are wrong:

A: No leak here
B: No loop unless used incorrectly
D: Hook order unaffected

5. What problem does this code introduce?

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

Options:

A. Memory leak B. Stale closure C. Infinite recursion D. Hook violation

✅ Correct Answer: B

💡 Explanation:

Function captures outdated count → leads to incorrect updates.

❌ Why others are wrong:

A: No leak
C: No recursion
D: Hook rules not violated

6. What is the correct fix for stale closure?

Options:

A. setCount(count + 1) B. setCount(prev => prev + 1) C. useMemo(() => count + 1) D. useEffect(() => setCount(count + 1))

✅ Correct Answer: B

💡 Explanation:

Functional update ensures latest state is used.

❌ Why others are wrong:

A: Same stale issue
C: Not updating state
D: Incorrect pattern

7. Why is this problematic in a custom hook?

fetch("/api/data");

(outside useEffect)

Options:

A. Causes memory leak B. Runs only once C. Runs on every render causing side effects D. Breaks hook rules

✅ Correct Answer: C

💡 Explanation:

Code executes on every render → uncontrolled side effects.

❌ Why others are wrong:

A: Not necessarily
B: Opposite behavior
D: Not a hook violation

8. What happens if a custom hook changes the order of internal hooks dynamically?

Options:

A. React ignores the change B. Causes incorrect state association C. Only affects performance D. Only affects nested hooks

✅ Correct Answer: B

💡 Explanation:

React maps hooks by order → mismatch leads to bugs.

❌ Why others are wrong:

A: React doesn’t ignore
C: More than performance
D: Affects entire hook chain

9. What is the purpose of `AbortController` in a data-fetching hook?

Options:

A. Optimize fetch speed B. Cancel ongoing requests on unmount C. Retry failed requests D. Prevent duplicate state updates

✅ Correct Answer: B

💡 Explanation:

Prevents updating state after component unmount.

❌ Why others are wrong:

A: No speed gain
C: Not for retries
D: Not its primary purpose

10. What is the main trade-off between custom hooks and context?

Options:

A. Hooks are slower B. Context cannot share state C. Hooks don’t share state, context does D. Context cannot handle side effects

✅ Correct Answer: C

💡 Explanation:

Custom hooks = logic reuse Context = shared state

❌ Why others are wrong:

A: No inherent slowness
B: Context is for sharing
D: Context can be used with effects

11. What is a potential issue when returning functions from a custom hook?

Options:

A. Memory leak B. New function reference every render C. Hook rule violation D. State reset

✅ Correct Answer: B

💡 Explanation:

New references cause re-renders in dependent components.

❌ Why others are wrong:

A: No leak
C: Not a rule issue
D: State unaffected

12. Why should event listeners be cleaned up in custom hooks?

Options:

A. Improve performance B. Avoid duplicate API calls C. Prevent memory leaks D. Maintain hook order

✅ Correct Answer: C

💡 Explanation:

Unremoved listeners persist → memory leaks.

❌ Why others are wrong:

A: Secondary effect
B: Not directly related
D: Not relevant

13. What is wrong with this hook?

function useSomething() {
  if (condition) {
    useEffect(() => {});
  }
}

Options:

A. Nothing B. Violates rules of hooks C. Causes memory leak D. Only fails in strict mode

✅ Correct Answer: B

💡 Explanation:

Hooks must not be conditional.

❌ Why others are wrong:

A: Incorrect
C: Not necessarily
D: Fails generally

14. Why might you use `useReducer` inside a custom hook?

Options:

A. Improve performance automatically B. Manage complex state transitions C. Replace useEffect D. Avoid re-renders

✅ Correct Answer: B

💡 Explanation:

Better suited for:

Multiple related state updates
Complex logic

❌ Why others are wrong:

A: Not guaranteed
C: Different purpose
D: Doesn’t prevent re-renders

15. What happens if you forget dependencies in a custom hook’s `useEffect`?

Options:

A. Nothing B. Infinite loop always C. Stale data or missed updates D. Hook crash

✅ Correct Answer: C

💡 Explanation:

Effect won’t react to changes → stale values.

❌ Why others are wrong:

A: Incorrect
B: Only sometimes
D: No crash

16. What is a hook factory?

Options:

A. Hook that creates components B. Function returning a custom hook C. Hook that uses reducers D. Hook that caches data

✅ Correct Answer: B

💡 Explanation:

Factory generates customized hooks dynamically.

❌ Why others are wrong:

A: Not definition
C: Unrelated
D: Too specific

17. Why should custom hooks avoid returning JSX?

Options:

A. Performance issues B. Violates hook rules C. Breaks separation of concerns D. Causes memory leaks

✅ Correct Answer: C

💡 Explanation:

Hooks should manage logic, not UI.

❌ Why others are wrong:

A: Not primary reason
B: Not a rule violation
D: Not related

18. In concurrent rendering, what must custom hooks ensure?

Options:

A. They run only once B. Side effects are idempotent and controlled C. They don’t use state D. They avoid useEffect

✅ Correct Answer: B

💡 Explanation:

React may re-run hooks → logic must be safe to repeat.

❌ Why others are wrong:

A: Not guaranteed
C: Incorrect
D: Wrong

🔚 Final Insight

These questions target:

Internal React behavior
Subtle bugs
Real-world design decisions

👉 Mastery here means: You’re not just using hooks — You understand how React thinks under the hood.

🧠 Custom Hooks — Real-World Coding Problems (Senior Level)

1. 🟡 Build `useDebounce` for Search Optimization

📌 Problem

Create a hook that delays updating a value until a specified delay has passed.

Constraints

Should reset timer on value change
Must cleanup timers properly

Expected Behavior

Typing “React” quickly → only final value is returned after delay

Edge Cases

Rapid input changes
Component unmount during delay

✅ Solution Explanation

Store debounced value in state
Use setTimeout in useEffect
Cleanup previous timer

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}

2. 🟡 Build `useFetch` with Cancellation

📌 Problem

Create a data-fetching hook with loading and error states.

Constraints

Prevent state updates after unmount
Handle errors gracefully

Expected Behavior

loading true initially
data updates after fetch
No memory leaks

Edge Cases

URL changes quickly
Network failure

✅ Solution Explanation

Use AbortController
Track loading + error

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

  useEffect(() => {
    const controller = new AbortController();

    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(err => {
        if (err.name !== "AbortError") console.error(err);
      })
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, loading };
}

3. 🟡 Build `useLocalStorage`

📌 Problem

Sync state with localStorage.

Constraints

Persist across reloads
Sync updates

Expected Behavior

Value stored/retrieved from localStorage

Edge Cases

Invalid JSON
Key changes

✅ Solution Explanation

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    try {
      return JSON.parse(localStorage.getItem(key)) ?? initialValue;
    } catch {
      return initialValue;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

4. 🟡 Build `useWindowSize`

📌 Problem

Track window width and height.

Constraints

Must cleanup listeners

Expected Behavior

Updates on resize

Edge Cases

SSR (window undefined)

✅ Solution

function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    function update() {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    }

    update();
    window.addEventListener("resize", update);

    return () => window.removeEventListener("resize", update);
  }, []);

  return size;
}

5. 🟡 Build `useToggle`

📌 Problem

Toggle boolean state with utility functions

Expected Behavior

Toggle, setTrue, setFalse

Edge Cases

Multiple toggles quickly

✅ Solution

function useToggle(initial = false) {
  const [state, setState] = useState(initial);

  const toggle = () => setState(s => !s);
  const setTrue = () => setState(true);
  const setFalse = () => setState(false);

  return { state, toggle, setTrue, setFalse };
}

6. 🟠 Build `usePrevious`

📌 Problem

Store previous value of a variable

Expected Behavior

Returns previous render value

Edge Cases

First render → undefined

✅ Solution

function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

7. 🟠 Build `useOutsideClick`

📌 Problem

Detect clicks outside a component

Constraints

Use refs

Edge Cases

Multiple components using it

✅ Solution

function useOutsideClick(ref, callback) {
  useEffect(() => {
    function handleClick(e) {
      if (!ref.current?.contains(e.target)) {
        callback();
      }
    }

    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);
  }, [ref, callback]);
}

8. 🟠 Build `useOnlineStatus`

📌 Problem

Track online/offline state

Expected Behavior

Updates on network change

Edge Cases

Browser support

✅ Solution

function useOnlineStatus() {
  const [online, setOnline] = useState(navigator.onLine);

  useEffect(() => {
    const on = () => setOnline(true);
    const off = () => setOnline(false);

    window.addEventListener("online", on);
    window.addEventListener("offline", off);

    return () => {
      window.removeEventListener("online", on);
      window.removeEventListener("offline", off);
    };
  }, []);

  return online;
}

9. 🔴 Build `useThrottle`

📌 Problem

Limit function execution frequency

Constraints

Should execute immediately then throttle

Edge Cases

Rapid calls

✅ Solution

function useThrottle(value, delay) {
  const [throttled, setThrottled] = useState(value);
  const lastRun = useRef(Date.now());

  useEffect(() => {
    const now = Date.now();
    if (now - lastRun.current >= delay) {
      setThrottled(value);
      lastRun.current = now;
    }
  }, [value, delay]);

  return throttled;
}

10. 🔴 Build `useIntersectionObserver`

📌 Problem

Detect if element is visible in viewport

Constraints

Use IntersectionObserver API

Edge Cases

Browser fallback

✅ Solution

function useIntersection(ref) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setVisible(entry.isIntersecting);
    });

    if (ref.current) observer.observe(ref.current);

    return () => observer.disconnect();
  }, [ref]);

  return visible;
}

11. 🔴 Build `useForm` (Reducer-based)

📌 Problem

Manage complex form state

Constraints

Handle multiple fields

Edge Cases

Reset form

✅ Solution

function useForm(initialState) {
  const reducer = (state, action) => {
    switch (action.type) {
      case "CHANGE":
        return { ...state, [action.name]: action.value };
      case "RESET":
        return initialState;
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  return {
    state,
    handleChange: e =>
      dispatch({ type: "CHANGE", name: e.target.name, value: e.target.value }),
    reset: () => dispatch({ type: "RESET" })
  };
}

12. 🔴 Build `useAsync`

📌 Problem

Handle async function lifecycle

Expected Behavior

loading, error, result

Edge Cases

Multiple calls overlap

✅ Solution

function useAsync(fn) {
  const [state, setState] = useState({ loading: false });

  const run = async (...args) => {
    setState({ loading: true });
    try {
      const result = await fn(...args);
      setState({ loading: false, result });
    } catch (error) {
      setState({ loading: false, error });
    }
  };

  return { ...state, run };
}

13. 🔴 Build `useEventListener`

📌 Problem

Generic event listener hook

Constraints

Support dynamic target

Edge Cases

Changing handler

✅ Solution

function useEventListener(event, handler, target = window) {
  useEffect(() => {
    target.addEventListener(event, handler);
    return () => target.removeEventListener(event, handler);
  }, [event, handler, target]);
}

14. 🔴 Build `useClipboard`

📌 Problem

Copy text to clipboard

Expected Behavior

Returns copy function + success state

Edge Cases

Permission denied

✅ Solution

function useClipboard() {
  const [copied, setCopied] = useState(false);

  const copy = async text => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
    } catch {
      setCopied(false);
    }
  };

  return { copied, copy };
}

15. 🔴 Build `useIdle`

📌 Problem

Detect user inactivity

Constraints

Reset timer on activity

Edge Cases

Multiple event listeners

✅ Solution

function useIdle(timeout = 3000) {
  const [idle, setIdle] = useState(false);

  useEffect(() => {
    let timer;

    const reset = () => {
      clearTimeout(timer);
      setIdle(false);
      timer = setTimeout(() => setIdle(true), timeout);
    };

    window.addEventListener("mousemove", reset);
    window.addEventListener("keydown", reset);

    reset();

    return () => {
      window.removeEventListener("mousemove", reset);
      window.removeEventListener("keydown", reset);
    };
  }, [timeout]);

  return idle;
}

16. 🔴 Build `useUndoRedo`

📌 Problem

Implement undo/redo functionality

Constraints

Maintain history stack

Edge Cases

Limit history size

✅ Solution

function useUndoRedo(initial) {
  const [history, setHistory] = useState([initial]);
  const [index, setIndex] = useState(0);

  const set = value => {
    const newHistory = history.slice(0, index + 1);
    newHistory.push(value);
    setHistory(newHistory);
    setIndex(newHistory.length - 1);
  };

  return {
    state: history[index],
    set,
    undo: () => index > 0 && setIndex(i => i - 1),
    redo: () => index < history.length - 1 && setIndex(i => i + 1)
  };
}

17. 🔴 Build `usePagination`

📌 Problem

Handle paginated data

Constraints

Page navigation

Edge Cases

Out-of-bound pages

✅ Solution

function usePagination(data, perPage) {
  const [page, setPage] = useState(1);

  const max = Math.ceil(data.length / perPage);

  const current = data.slice((page - 1) * perPage, page * perPage);

  return {
    current,
    next: () => setPage(p => Math.min(p + 1, max)),
    prev: () => setPage(p => Math.max(p - 1, 1))
  };
}

18. 🔴 Build `useHover`

📌 Problem

Detect hover state

Edge Cases

Mobile devices

✅ Solution

function useHover() {
  const [hovered, setHovered] = useState(false);

  const ref = useRef();

  useEffect(() => {
    const node = ref.current;
    if (!node) return;

    const enter = () => setHovered(true);
    const leave = () => setHovered(false);

    node.addEventListener("mouseenter", enter);
    node.addEventListener("mouseleave", leave);

    return () => {
      node.removeEventListener("mouseenter", enter);
      node.removeEventListener("mouseleave", leave);
    };
  }, []);

  return [ref, hovered];
}

🔚 Final Insight

These problems test:

Real-world thinking
Lifecycle awareness
Cleanup discipline
Performance considerations

👉 Mastery means: You can design hooks like a library author, not just use them.

🛠️ Senior React Code Review — Custom Hooks Debugging Challenges

1. ❗ Stale Closure in Counter Hook

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

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

🔍 What’s wrong?

increment uses a stale value of count

💡 Why it happens

Closures capture the value at render time. Multiple rapid updates may use outdated count.

✅ Fix

const increment = () => {
  setCount(c => c + 1);
};

🧠 Best Practice

Always use functional updates when new state depends on previous state.

2. ❗ Memory Leak in Fetch Hook

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData);
  }, [url]);

  return data;
}

🔍 What’s wrong?

State may update after component unmounts.

💡 Why

Fetch is async; component may unmount before it completes.

✅ Fix

useEffect(() => {
  const controller = new AbortController();

  fetch(url, { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(err => {
      if (err.name !== "AbortError") throw err;
    });

  return () => controller.abort();
}, [url]);

🧠 Best Practice

Always cancel async operations in effects.

3. ❗ Missing Dependency Causing Stale Data

function useSearch(query) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    fetch(`/api?q=${query}`).then(res => res.json()).then(setResults);
  }, []); // ❌

  return results;
}

🔍 What’s wrong?

Effect does not re-run when query changes.

💡 Why

Empty dependency array freezes the initial query.

✅ Fix

useEffect(() => {
  fetch(`/api?q=${query}`)
    .then(res => res.json())
    .then(setResults);
}, [query]);

🧠 Best Practice

Always include all external dependencies.

4. ❗ Event Listener Re-Attached Every Render

function useResize(handler) {
  useEffect(() => {
    window.addEventListener("resize", handler);
    return () => window.removeEventListener("resize", handler);
  });
}

🔍 What’s wrong?

Effect runs on every render → repeated add/remove.

💡 Why

No dependency array → runs after every render.

✅ Fix

useEffect(() => {
  window.addEventListener("resize", handler);
  return () => window.removeEventListener("resize", handler);
}, [handler]);

🧠 Best Practice

Always define effect dependencies explicitly.

5. ❗ Infinite Loop in Hook

function useData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [data]); // ❌

  return data;
}

🔍 What’s wrong?

Effect depends on data, which it updates → infinite loop.

💡 Why

State update triggers effect again.

✅ Fix

useEffect(() => {
  fetch(url).then(res => res.json()).then(setData);
}, [url]);

🧠 Best Practice

Dependencies should reflect inputs, not outputs.

6. ❗ Unstable Function Causing Re-Renders

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

  return {
    increment: () => setCount(c => c + 1)
  };
}

🔍 What’s wrong?

New function instance on every render.

💡 Why

Functions are recreated → breaks memoization.

✅ Fix

const increment = useCallback(() => {
  setCount(c => c + 1);
}, []);

return { increment };

🧠 Best Practice

Memoize functions when passed to children.

7. ❗ Incorrect Ref Usage

function usePrevious(value) {
  const ref = useRef(value);

  return ref.current;
}

🔍 What’s wrong?

Ref is never updated.

💡 Why

useRef doesn’t auto-update like state.

✅ Fix

useEffect(() => {
  ref.current = value;
});

🧠 Best Practice

Update refs inside effects.

8. ❗ Breaking Hook Rules

function useFeature(flag) {
  if (flag) {
    useEffect(() => {
      console.log("Enabled");
    }, []);
  }
}

🔍 What’s wrong?

Hook is conditionally called.

💡 Why

Breaks hook order → undefined behavior.

✅ Fix

useEffect(() => {
  if (flag) {
    console.log("Enabled");
  }
}, [flag]);

🧠 Best Practice

Never call hooks conditionally.

9. ❗ Race Condition in Fetch

function useUser(id) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/user/${id}`).then(res => res.json()).then(setUser);
  }, [id]);
}

🔍 What’s wrong?

Older request may overwrite newer one.

💡 Why

Async responses return out of order.

✅ Fix

useEffect(() => {
  let active = true;

  fetch(`/user/${id}`)
    .then(res => res.json())
    .then(data => {
      if (active) setUser(data);
    });

  return () => {
    active = false;
  };
}, [id]);

🧠 Best Practice

Handle race conditions in async hooks.

10. ❗ Derived State Stored Incorrectly

function useFullName(first, last) {
  const [fullName, setFullName] = useState("");

  useEffect(() => {
    setFullName(first + " " + last);
  }, [first, last]);

  return fullName;
}

🔍 What’s wrong?

Derived state stored unnecessarily.

💡 Why

Adds extra render cycle.

✅ Fix

return `${first} ${last}`;

🧠 Best Practice

Avoid storing derived state.

11. ❗ Missing Cleanup for Timer

function useTimer() {
  useEffect(() => {
    setInterval(() => console.log("tick"), 1000);
  }, []);
}

🔍 What’s wrong?

Interval never cleared.

💡 Why

Leads to memory leaks.

✅ Fix

useEffect(() => {
  const id = setInterval(() => console.log("tick"), 1000);
  return () => clearInterval(id);
}, []);

🧠 Best Practice

Always cleanup timers.

12. ❗ Using State Instead of Ref for Mutable Value

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

  setCount(c => c + 1);

  return count;
}

🔍 What’s wrong?

State update inside render → infinite loop.

💡 Why

State updates trigger re-render immediately.

✅ Fix

const ref = useRef(0);
ref.current++;
return ref.current;

🧠 Best Practice

Use useRef for non-render-triggering values.

13. ❗ Over-Fetching Due to Object Dependency

function useFilter(data, filter) {
  useEffect(() => {
    // expensive logic
  }, [filter]);
}

🔍 What’s wrong?

filter is an object → new reference each render.

💡 Why

Triggers unnecessary effect runs.

✅ Fix

const stableFilter = useMemo(() => filter, [JSON.stringify(filter)]);

🧠 Best Practice

Stabilize object dependencies.

14. ❗ Hook Not SSR Safe

function useWidth() {
  return window.innerWidth;
}

🔍 What’s wrong?

Breaks in SSR (window undefined).

💡 Why

Server doesn’t have window.

✅ Fix

const [width, setWidth] = useState(
  typeof window !== "undefined" ? window.innerWidth : 0
);

🧠 Best Practice

Guard browser APIs in hooks.

15. ❗ Incorrect Dependency on Function

function useSomething(fn) {
  useEffect(() => {
    fn();
  }, [fn]);
}

🔍 What’s wrong?

Effect runs every render if fn is unstable.

💡 Why

Functions are recreated unless memoized.

✅ Fix

Either memoize fn in parent OR
Remove from deps if safe

🧠 Best Practice

Stabilize callbacks using useCallback.

16. ❗ State Reset on Key Change

function useKeyedState(key) {
  const [value, setValue] = useState(0);
  return [value, setValue];
}

🔍 What’s wrong?

State does not reset when key changes.

💡 Why

useState only initializes once.

✅ Fix

useEffect(() => {
  setValue(0);
}, [key]);

🧠 Best Practice

Handle prop-driven resets explicitly.

17. ❗ Multiple Event Listeners Leak

function useScroll() {
  useEffect(() => {
    window.addEventListener("scroll", () => console.log("scroll"));
  }, []);
}

🔍 What’s wrong?

Anonymous function cannot be removed.

💡 Why

Cleanup needs same reference.

✅ Fix

useEffect(() => {
  const handler = () => console.log("scroll");
  window.addEventListener("scroll", handler);
  return () => window.removeEventListener("scroll", handler);
}, []);

🧠 Best Practice

Always store handler references.

🔚 Final Takeaway

These bugs reflect real production failures:

Stale closures
Race conditions
Memory leaks
Dependency mistakes

👉 Senior-level skill = Not just writing hooks, but predicting React behavior under pressure.

🧠 Senior Frontend Architect — Custom Hooks Machine Coding Problems

1. 🔴 Build a Production-Grade Search with Debounce + Caching

📌 Requirements

Input box with live search
API call after user stops typing (debounce)
Cache previous results (avoid duplicate API calls)

🖥️ UI Behavior

Typing → loading spinner
Cached results → instant display
Empty query → no API call

🔄 State/Data Flow

query → debounced → fetch → cache → render

⚠️ Edge Cases

Rapid typing
Same query repeated
API failure

⚡ Performance

Debounce (300–500ms)
Cache results (Map or object)

🏗️ Suggested Architecture

useDebounce(query)
useSearch(query) (handles caching + API)

🪜 Solution Approach

Create debounce hook
Maintain cache with useRef
Fetch only if query not cached
Handle loading + error states

2. 🔴 Build a Dynamic Form Builder (Schema-Driven)

📌 Requirements

Render form based on JSON schema
Support validation & dynamic fields

🖥️ UI Behavior

Fields appear/disappear based on conditions
Show validation errors on submit

🔄 State/Data Flow

Schema → generate fields → state via reducer

⚠️ Edge Cases

Nested fields
Dynamic validation rules
Reset form

⚡ Performance

Avoid re-rendering all fields
Memoize field components

🏗️ Architecture

useForm(schema)
useField(name)
useValidation()

🪜 Approach

Use useReducer for form state
Store schema separately
Generate fields dynamically
Validate on change/submit

3. 🔴 Build Infinite Scroll with Virtualization

📌 Requirements

Load items as user scrolls
Render only visible items

🖥️ UI Behavior

Scroll → fetch next page
Smooth scrolling

🔄 State/Data Flow

Scroll position → trigger fetch → append data

⚠️ Edge Cases

Fast scrolling
Duplicate fetches
End of list

⚡ Performance

Virtualize list (windowing)
Throttle scroll events

🏗️ Architecture

useInfiniteScroll()
useVirtualList()

🪜 Approach

Track scroll position
Trigger fetch near bottom
Use refs for container height
Render subset of items

4. 🔴 Build Global Auth System with Custom Hook

📌 Requirements

Login/logout
Persist user session
Protect routes

🖥️ UI Behavior

Redirect unauthenticated users
Show user info globally

🔄 State/Data Flow

Auth state → context → components

⚠️ Edge Cases

Token expiry
Refresh token logic

⚡ Performance

Avoid unnecessary re-renders

🏗️ Architecture

useAuth() + Context
useProtectedRoute()

🪜 Approach

Store token in localStorage
Sync with context
Handle login/logout actions
Add route guard hook

5. 🔴 Build Real-Time Chat Hook (WebSocket)

📌 Requirements

Send/receive messages in real-time

🖥️ UI Behavior

Messages update instantly
Connection status indicator

🔄 State/Data Flow

WebSocket → message stream → UI

⚠️ Edge Cases

Connection drops
Message ordering

⚡ Performance

Batch updates if needed

🏗️ Architecture

useWebSocket(url)
useChat(roomId)

🪜 Approach

Initialize socket in hook
Listen for messages
Update state safely
Cleanup on unmount

6. 🔴 Build Undo/Redo Editor System

📌 Requirements

Track history of user actions
Undo/redo support

🖥️ UI Behavior

Undo button reverts state
Redo reapplies changes

🔄 State/Data Flow

Current state + history stack

⚠️ Edge Cases

Limit history size
Rapid updates

⚡ Performance

Avoid large memory usage

🏗️ Architecture

useUndoRedo()

🪜 Approach

Maintain history array
Track pointer index
Slice history on new action
Implement undo/redo safely

7. 🔴 Build Advanced Data Fetching Hook (React Query Lite)

📌 Requirements

Cache API responses
Background refetch
Deduplicate requests

🖥️ UI Behavior

Instant cached data
Refetch indicator

🔄 State/Data Flow

Query key → cache → fetch

⚠️ Edge Cases

Stale data
Parallel requests

⚡ Performance

Cache + deduplication

🏗️ Architecture

useQuery(key, fetchFn)
Global cache store

🪜 Approach

Use Map for cache
Track in-flight requests
Return cached data immediately
Refetch in background

8. 🔴 Build Drag-and-Drop Hook

📌 Requirements

Drag items between lists

🖥️ UI Behavior

Visual feedback while dragging

🔄 State/Data Flow

Drag state → drop target → update list

⚠️ Edge Cases

Dropping outside
Reordering

⚡ Performance

Avoid excessive re-renders

🏗️ Architecture

useDrag()
useDrop()

🪜 Approach

Track dragged item with ref
Handle drag events
Update state on drop
Cleanup listeners

9. 🔴 Build Feature Flag System

📌 Requirements

Enable/disable features dynamically

🖥️ UI Behavior

Features toggle without reload

🔄 State/Data Flow

Flags → hook → components

⚠️ Edge Cases

Async flag loading
Fallback values

⚡ Performance

Avoid re-rendering entire app

🏗️ Architecture

useFeatureFlag(flagName)

🪜 Approach

Store flags globally
Fetch from API
Provide via context
Hook reads specific flag

10. 🔴 Build Viewport-Based Lazy Loading System

📌 Requirements

Load images/components only when visible

🖥️ UI Behavior

Placeholder → load on scroll into view

🔄 State/Data Flow

Intersection → load trigger → render

⚠️ Edge Cases

Fast scroll
Multiple elements

⚡ Performance

Use IntersectionObserver

🏗️ Architecture

useInView(ref)
useLazyLoad()

🪜 Approach

Observe element visibility
Trigger load when visible
Unobserve after load
Cache loaded state

🔚 Final Insight

These problems simulate:

Real product features
Performance-critical systems
Scalable architecture design

👉 At senior level, evaluation focuses on:

Hook design quality
State management clarity
Edge-case handling
Performance awareness

🧠 Senior Frontend Interview — Custom Hooks (Deep Dive)

1. How would you decide whether to extract logic into a custom hook vs keeping it inside a component?

🔍 Follow-up:

What signals indicate over-abstraction?
How does team size affect this decision?

✅ Strong Answer:

Extract when:
- Logic is reused across components
- Component becomes too complex (logic/UI mixed)
Avoid when:
- Logic is trivial or used once
Consider:
- Readability vs reuse trade-off
- Debuggability

❌ Weak Answer:

“Whenever there is duplicate code”

👉 Fails because:

Ignores complexity, readability, and maintainability trade-offs

2. Explain how React tracks hook state internally and why order matters.

🔍 Follow-up:

What happens if order changes?
Can React detect this reliably?

✅ Strong Answer:

React uses a linked list of hooks per component
Hooks are mapped by call order
Changing order → state mismatch → bugs

❌ Weak Answer:

“React uses hook names”

👉 Fails because:

Completely incorrect mental model

3. Design a `useFetch` hook for production use. What concerns would you handle?

🔍 Follow-up:

How do you prevent race conditions?
How do you cache results?

✅ Strong Answer:

Must include:

Loading/error state
AbortController (cleanup)
Race condition handling
Optional caching layer
Dependency management

❌ Weak Answer:

“Just use useEffect and fetch”

👉 Fails because:

Ignores real-world issues like cancellation and caching

🔍 Follow-up:

How would you make them share state?

✅ Strong Answer:

State is tied to component instance
Each hook call creates a new state
Share via:
- Context
- External store

❌ Weak Answer:

“Because hooks are isolated”

👉 Fails because:

Doesn’t explain underlying reason

5. You notice a custom hook causing excessive re-renders. How would you debug it?

🔍 Follow-up:

What tools would you use?
What patterns cause this?

✅ Strong Answer:

Steps:

Check returned values (new objects/functions)
Inspect dependencies
Use React DevTools profiler
Add memoization (useMemo, useCallback)

❌ Weak Answer:

“Use memo everywhere”

👉 Fails because:

Blind optimization without diagnosis

6. What are common pitfalls when using `useEffect` inside custom hooks?

🔍 Follow-up:

How do you avoid stale closures?

✅ Strong Answer:

Missing dependencies → stale data
Over-dependencies → unnecessary runs
Async side effects → memory leaks
Fix:
- Dependency discipline
- Cleanup functions
- Functional updates

❌ Weak Answer:

“Just follow ESLint”

👉 Fails because:

Doesn’t explain reasoning

7. How would you design a custom hook that is both flexible and reusable?

🔍 Follow-up:

How do you design its API?

✅ Strong Answer:

Accept parameters for configuration
Return minimal but useful API
Avoid tight coupling
Example:

useDebounce(value, delay)

❌ Weak Answer:

“Make it generic”

👉 Fails because:

Too vague, no implementation thinking

8. Explain a scenario where a custom hook introduces a bug due to stale closures.

🔍 Follow-up:

How do you fix it?

✅ Strong Answer:

Event handlers capturing old state
Fix with:
- Functional updates
- Correct dependencies

❌ Weak Answer:

“Closures are tricky”

👉 Fails because:

No concrete understanding

9. When would you use `useReducer` inside a custom hook?

🔍 Follow-up:

Why not just use useState?

✅ Strong Answer:

Complex state transitions
Multiple related states
Better predictability

❌ Weak Answer:

“For big state”

👉 Fails because:

Lacks clarity on why

10. How do you handle race conditions in async hooks?

🔍 Follow-up:

What if requests return out of order?

✅ Strong Answer:

Use:
- AbortController OR
- “isActive” flag
Ensure only latest request updates state

❌ Weak Answer:

“Use try/catch”

👉 Fails because:

Doesn’t solve race conditions

11. What are the trade-offs between custom hooks and third-party libraries like React Query?

🔍 Follow-up:

When would you build vs buy?

✅ Strong Answer:

Custom hooks:
- Lightweight, flexible
- Require maintenance
Libraries:
- Feature-rich (caching, retries)
- More abstraction

❌ Weak Answer:

“Libraries are always better”

👉 Fails because:

Ignores trade-offs

12. How would you design a hook that works in SSR?

🔍 Follow-up:

What breaks in SSR?

✅ Strong Answer:

Avoid direct browser APIs
Use guards:

typeof window !== "undefined"

❌ Weak Answer:

“SSR just works”

👉 Fails because:

Ignores environment differences

13. How do you prevent memory leaks in custom hooks?

🔍 Follow-up:

Examples?

✅ Strong Answer:

Cleanup:
- Event listeners
- Timers
- Async calls

❌ Weak Answer:

“React handles cleanup”

👉 Fails because:

Incorrect assumption

14. How do custom hooks behave in concurrent rendering?

🔍 Follow-up:

What changes compared to legacy rendering?

✅ Strong Answer:

Hooks may run multiple times
Must be:
- Idempotent
- Side-effect safe

❌ Weak Answer:

“No difference”

👉 Fails because:

Misses modern React behavior

15. How would you design a `useQuery`-like hook?

🔍 Follow-up:

How do you cache and deduplicate?

✅ Strong Answer:

Use:
- Cache map
- In-flight request tracking
- Background refetch

❌ Weak Answer:

“Call fetch and store data”

👉 Fails because:

Misses system-level thinking

16. What’s the risk of returning non-memoized values from hooks?

🔍 Follow-up:

When is it acceptable?

✅ Strong Answer:

Causes re-renders
Acceptable if:
- Not passed to children
- No performance concern

❌ Weak Answer:

“Always memoize”

👉 Fails because:

Over-optimization mindset

17. How would you debug a hook that works locally but fails in production?

🔍 Follow-up:

What differences matter?

✅ Strong Answer:

Check:
- Strict mode double render
- Environment differences
- Race conditions
- Minification issues

❌ Weak Answer:

“Console.log”

👉 Fails because:

Too shallow

18. How do you compose multiple hooks safely?

🔍 Follow-up:

What risks exist?

✅ Strong Answer:

Call hooks in consistent order
Avoid conditional composition
Combine outputs cleanly

❌ Weak Answer:

“Just call them”

👉 Fails because:

Ignores rules of hooks

19. When can a custom hook hurt performance?

🔍 Follow-up:

Real examples?

✅ Strong Answer:

Frequent re-renders
Expensive computations inside hook
Unstable dependencies

❌ Weak Answer:

“Hooks are fast”

👉 Fails because:

Oversimplified

🔚 Final Insight

At senior level, interviewers evaluate:

Mental model of React internals
Ability to design scalable abstractions
Understanding of trade-offs
Debugging under real-world constraints

👉 Strong candidates don’t just use hooks — They design, analyze, and optimize them like systems.

Smart vs dumb components Render props

​📘 Custom Hooks in React — Complete Theory Guide

​1. 📌 Introduction

​🔹 What are Custom Hooks?

​🔹 Why are Custom Hooks Important?

​🔹 When and Why Do We Use Them?

​Example Use Cases:

​2. ⚙️ Concepts / Internal Workings

​🔹 1. Hooks are Just Functions (But with Rules)

​🔹 2. Rules of Hooks (Critical)

​🔹 3. How Custom Hooks Work Internally

​🔹 4. Each Hook Has Its Own State

​🔹 5. Relationship with Other React Features

​3. 🧪 Syntax & Examples

​🔹 Basic Syntax

​🔹 Example 1: Counter Hook

​Usage:

​🔹 Example 2: Fetch Data Hook

​🔹 Example 3: Window Size Hook

​🔹 Example 4: Debounce Hook

​🔹 Example 5: Sharing Logic Across Components

​4. ⚠️ Edge Cases / Common Mistakes

​🔹 1. Breaking Hook Order

​🔹 2. Forgetting Dependencies in useEffect

​🔹 3. Returning Unstable Functions

​🔹 4. Sharing State Accidentally (Wrong Assumption)

​🔹 5. Memory Leaks (Async + Effects)

​🔹 6. Over-Abstraction

​5. ✅ Best Practices

​🔹 1. Follow Naming Convention

​🔹 2. Keep Hooks Focused

​🔹 3. Extract Logic, Not UI

​🔹 4. Use Functional Updates

​🔹 5. Optimize Re-renders

​🔹 6. Handle Cleanup Properly

​🔹 7. Avoid Side Effects Outside Hooks

​🔹 8. Test Custom Hooks

​🔹 9. Document Your Hooks

​🔹 10. Think in Composition

​🧠 Final Mental Model

​🧠 Senior-Level React Interview — Custom Hooks (Conceptual Deep Dive)

​1. What problem do custom hooks actually solve beyond “code reuse”?

​✅ Strong Answer

​💡 Why this matters

​🔁 Comparison

​2. How does React internally track state for custom hooks?

​✅ Strong Answer

​💡 Why this matters

​3. Why must custom hooks follow the “use” naming convention?

​✅ Strong Answer

​💡 Why this matters

​4. Do multiple components sharing a custom hook share state?

​✅ Strong Answer

​💡 Why

​🔁 To share state:

​5. When should you NOT create a custom hook?

​✅ Strong Answer

​💡 Why

​6. How do custom hooks affect component re-renders?

​✅ Strong Answer

​💡 Important nuance

​✅ Fix

​7. How do you prevent stale closures in custom hooks?

​✅ Strong Answer

​✅ Fix: Functional updates

​💡 Why

​8. How should side effects be handled inside custom hooks?

​✅ Strong Answer

​💡 Why

​9. How do you design a robust data-fetching custom hook?

​✅ Strong Answer

​💡 Why

​10. What are the trade-offs between custom hooks and context?

​✅ Strong Answer

​💡 Insight

​11. How do you compose multiple custom hooks safely?

​✅ Strong Answer

​⚠️ Pitfall

​💡 Why

​12. What are common memory leak scenarios in custom hooks?

​✅ Strong Answer

📘 Custom Hooks in React — Complete Theory Guide

1. 📌 Introduction

🔹 What are Custom Hooks?

🔹 Why are Custom Hooks Important?

🔹 When and Why Do We Use Them?

Example Use Cases:

2. ⚙️ Concepts / Internal Workings

🔹 1. Hooks are Just Functions (But with Rules)

🔹 2. Rules of Hooks (Critical)

🔹 3. How Custom Hooks Work Internally

🔹 4. Each Hook Has Its Own State

🔹 5. Relationship with Other React Features

3. 🧪 Syntax & Examples

🔹 Basic Syntax

🔹 Example 1: Counter Hook

Usage:

🔹 Example 2: Fetch Data Hook

🔹 Example 3: Window Size Hook

🔹 Example 4: Debounce Hook

🔹 Example 5: Sharing Logic Across Components

4. ⚠️ Edge Cases / Common Mistakes

🔹 1. Breaking Hook Order

🔹 2. Forgetting Dependencies in `useEffect`

🔹 3. Returning Unstable Functions

🔹 4. Sharing State Accidentally (Wrong Assumption)

🔹 5. Memory Leaks (Async + Effects)

🔹 6. Over-Abstraction

5. ✅ Best Practices

🔹 1. Follow Naming Convention

🔹 2. Keep Hooks Focused

🔹 3. Extract Logic, Not UI

🔹 4. Use Functional Updates

🔹 5. Optimize Re-renders

🔹 6. Handle Cleanup Properly

🔹 7. Avoid Side Effects Outside Hooks

🔹 8. Test Custom Hooks

🔹 9. Document Your Hooks

🔹 10. Think in Composition

🧠 Final Mental Model

🧠 Senior-Level React Interview — Custom Hooks (Conceptual Deep Dive)

1. What problem do custom hooks actually solve beyond “code reuse”?

✅ Strong Answer

💡 Why this matters

🔁 Comparison

2. How does React internally track state for custom hooks?

✅ Strong Answer

💡 Why this matters

3. Why must custom hooks follow the “use” naming convention?

✅ Strong Answer

💡 Why this matters

4. Do multiple components sharing a custom hook share state?

✅ Strong Answer

💡 Why

🔁 To share state:

5. When should you NOT create a custom hook?

✅ Strong Answer

💡 Why

6. How do custom hooks affect component re-renders?

✅ Strong Answer

💡 Important nuance

✅ Fix

7. How do you prevent stale closures in custom hooks?

✅ Strong Answer

✅ Fix: Functional updates

💡 Why

8. How should side effects be handled inside custom hooks?

✅ Strong Answer

💡 Why

9. How do you design a robust data-fetching custom hook?

✅ Strong Answer

💡 Why

10. What are the trade-offs between custom hooks and context?

✅ Strong Answer

💡 Insight

11. How do you compose multiple custom hooks safely?

✅ Strong Answer

⚠️ Pitfall

💡 Why

12. What are common memory leak scenarios in custom hooks?

✅ Strong Answer