Concept questionMedium~7 minHooks, Effects & Data / 6 of 6

Interview question

What makes a custom React hook a useful abstraction rather than just moved code?

Design reusable custom React hooks

Explains how custom hooks share stateful behavior while preserving ownership, lifecycle, and a focused contract.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

A custom hook can combine state, effects, memoized callbacks, and other hooks behind a focused interface. Each call gets its own state; the hook shares behavior, not one global instance. I would extract a hook when several components need the same lifecycle logic or when one component becomes hard to read because a coherent behavior is mixed with rendering. The returned values and commands should describe the feature, such as data, status, retry, and cancel, rather than expose every internal setter.

Full answer below

Practice focus

Custom hooks, stateful behavior, lifecycle, contracts, dependency injection, cancellation, composition, and testing.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Moving code into a function does not automatically create a good hook. A useful hook gives one piece of stateful behavior a clear contract while preserving React's ownership and lifecycle rules.
A custom hook can combine state, effects, memoized callbacks, and other hooks behind a focused interface. Each call gets its own state; the hook shares behavior, not one global instance. I would extract a hook when several components need the same lifecycle logic or when one component becomes hard to read because a coherent behavior is mixed with rendering. The returned values and commands should describe the feature, such as data, status, retry, and cancel, rather than expose every internal setter.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I make dependencies explicit through parameters and avoid a hook that secretly reads many unrelated contexts. Effects inside the hook still need correct dependencies, cleanup, request identity, and cancellation. A hook that wraps data fetching should either own cache semantics clearly or delegate them to the application's query layer instead of inventing a second cache. Stable callback references matter only when consumers rely on them; I would not memoize every return value without a reason.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would treat the hook API like a small module contract. It needs defined initialization, refresh, error, unmount, and parameter-change behavior. Tests can render a small consumer and exercise observable transitions, while lower-level pure helpers can be tested directly. I would also verify server-rendering constraints before using browser APIs and avoid conditional hook calls. If the abstraction accumulates flags for unrelated workflows, I would split it or keep the logic near the feature rather than forcing reuse.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Extracting a hook only to reduce line count.
Returning every internal setter as the public API.
Hiding context, network, and storage dependencies.
Calling hooks conditionally inside the custom hook.

Red flagsCandidateSigns the approach is fragileSignals that an interviewer may treat as risky.Open details

Details

Consumers need knowledge of the hook's internal timing to use it.
Parameter changes leave subscriptions or requests from the old value active.
One generic hook has many unrelated boolean options.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

Does each hook call share state?
How would you test a custom hook?
When should fetching stay in a query library?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

2 linked

Go deeper

Practice the next layer of the same subject.

useEffect Dependencies Effect Cleanup

Opening drill

Concept questionMedium~7 minHooks, Effects & Data / 6 of 6

Interview question

What makes a custom React hook a useful abstraction rather than just moved code?

Design reusable custom React hooks

Explains how custom hooks share stateful behavior while preserving ownership, lifecycle, and a focused contract.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Custom hooks, stateful behavior, lifecycle, contracts, dependency injection, cancellation, composition, and testing.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Moving code into a function does not automatically create a good hook. A useful hook gives one piece of stateful behavior a clear contract while preserving React's ownership and lifecycle rules.
A custom hook can combine state, effects, memoized callbacks, and other hooks behind a focused interface. Each call gets its own state; the hook shares behavior, not one global instance. I would extract a hook when several components need the same lifecycle logic or when one component becomes hard to read because a coherent behavior is mixed with rendering. The returned values and commands should describe the feature, such as data, status, retry, and cancel, rather than expose every internal setter.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I make dependencies explicit through parameters and avoid a hook that secretly reads many unrelated contexts. Effects inside the hook still need correct dependencies, cleanup, request identity, and cancellation. A hook that wraps data fetching should either own cache semantics clearly or delegate them to the application's query layer instead of inventing a second cache. Stable callback references matter only when consumers rely on them; I would not memoize every return value without a reason.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would treat the hook API like a small module contract. It needs defined initialization, refresh, error, unmount, and parameter-change behavior. Tests can render a small consumer and exercise observable transitions, while lower-level pure helpers can be tested directly. I would also verify server-rendering constraints before using browser APIs and avoid conditional hook calls. If the abstraction accumulates flags for unrelated workflows, I would split it or keep the logic near the feature rather than forcing reuse.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Extracting a hook only to reduce line count.
Returning every internal setter as the public API.
Hiding context, network, and storage dependencies.
Calling hooks conditionally inside the custom hook.

Red flagsCandidateSigns the approach is fragileSignals that an interviewer may treat as risky.Open details

Details

Consumers need knowledge of the hook's internal timing to use it.
Parameter changes leave subscriptions or requests from the old value active.
One generic hook has many unrelated boolean options.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

Does each hook call share state?
How would you test a custom hook?
When should fetching stay in a query library?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

2 linked

Go deeper

Practice the next layer of the same subject.

useEffect Dependencies Effect Cleanup

What makes a custom React hook a useful abstraction rather than just moved code?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper

What makes a custom React hook a useful abstraction rather than just moved code?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper