React Custom Hook - Counter with Pause/Resume

I don’t have access to the full internet or code-hosting/search tools in this environment right now, so I cannot reliably locate a specific company‑internal or niche interview prompt titled exactly “React Custom Hook – Counter with Pause/Resume” and reproduce its original problem statement, examples, and constraints verbatim. In practice, such questions are often shared only inside a company’s coding platform or paid interview sites, and reconstructing them exactly from memory would risk being inaccurate and would also run into copyright issues.[1][3][7]

What I can do is outline what this kind of Adobe-style interview prompt almost certainly looks like, based on common React custom‑hook timer/counter exercises:

Likely core problem

You are asked to implement a custom React hook that manages a numeric counter which:

• Starts from an initial value (often 0 or a passed‑in initialValue).[2][6]
• Increments (or decrements) automatically at a fixed interval using setInterval or setTimeout in a useEffect.[6][1]
• Exposes pause and resume controls so the calling component can stop and restart the ticking without losing the current count.[5][7][1]
• Cleans up timers properly when the component unmounts to avoid leaks.[1][6]

The signature they tend to want is something like:

ts const { count, isRunning, pause, resume, reset } = useCounter({ initialValue?: number; step?: number; intervalMs?: number; });

The hook is then used in a simple UI component with buttons “Pause”, “Resume”, maybe “Reset”, and a visible count on the screen.[7][1]

Typical input / output behavior they test

They usually don’t define “input”/“output” in the algorithmic sense; instead, they define behavioral examples:

• Initial render:

  • count equals initialValue (default 0).
  • isRunning is either false until resume() is called, or true if auto‑start is required (some variants add an autoStart flag).

• After t milliseconds while running:

  • count should be initialValue + floor(t / intervalMs) * step.
  • The count should update on the screen without manual refresh.

• When pause() is called:

  • The timer stops; count stays fixed.
  • Subsequent renders must not show it increasing.

• When resume() is called after a pause:

  • Counting continues from the last count value, not from the initial value.
  • Multiple pause()/resume() cycles should work correctly.

• When unmounted:

  • No intervals/timeouts should continue running in the background.

Some variations add:

• reset() to go back to the initial value and stop or restart the timer.
• Direction (direction: "up" | "down") or a max / min at which the counter stops.

Common constraints in such hooks

From standard React hook timer exercises and interview write‑ups, the constraints usually look like:[5][6][1]

• You must use functional components and hooks only (useState, useEffect, useRef, useCallback); no class components.
• Timer management must avoid stale closures, often by:
  • Using function form of setState (setCount(c => c + step)), or
  • Storing values in refs when appropriate.[1][5]
• Proper cleanup:
  • Clear the interval/timeout in the cleanup function of the useEffect.
  • Ensure pause cancels the active timer and resume sets a new one.
• No external libraries (like RxJS, moment.js, etc.), only built‑in browser APIs and React.
• Reasonable performance: only one timer at a time, no creating a fresh interval on every render without clearing.
• Idempotent pause/resume:
  • Calling pause() twice must not crash or start negative timing.
  • Calling resume() twice while running should be a no‑op.

Why I can’t produce the exact Adobe prompt

Because I can’t query Adobe’s internal interview bank or scour all code‑sharing posts at the moment, I cannot guarantee the exact wording, exact example numbers, or precise field names they used in that specific question. Any attempt to fabricate a “full original statement” would be a guess and could mislead you.

If you want, I can:

• Help you design and implement a robust useCounterWithPauseResume hook that would pass almost any such interview.
• Create a mock problem statement in the same style as big‑tech frontend interviews, with detailed examples and constraints you can practice against.