Why React Developers Who Ask Questions Back Impress Me Most

Me: Build a search box that shows matching users.

Candidate: (starts typing)
  useEffect fetch on every change of query...

20 minutes later
Me: The API is rate limited. Typing 'ravi' sends
four requests. Can you fix that?

Candidate: (rewrites the effect, adds a timer,
loses track of loading state, runs out of time)

Me: Build a search box that shows matching users.

Candidate: Two quick questions.
1. Is the user list small enough to filter on the
   client, or do I call a search API?
2. If it is an API, should I wait until the user
   stops typing before calling it?

Me: API, and yes, it is rate limited.

Candidate: Then I will debounce the query by about
300 ms and cancel stale requests so old results
do not overwrite new ones.

import { useEffect, useState } from "react";

export function useDebouncedValue(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id); // reset on every keystroke
  }, [value, delay]);

  return debounced;
}

import { useEffect, useState } from "react";
import { useDebouncedValue } from "./useDebouncedValue";

export function useUserSearch(query) {
  const q = useDebouncedValue(query.trim(), 300);
  const [state, setState] = useState({ status: "idle", users: [] });

  useEffect(() => {
    if (!q) {
      setState({ status: "idle", users: [] });
      return;
    }
    const controller = new AbortController();
    setState((s) => ({ ...s, status: "loading" }));

    fetch(`/api/users?search=${encodeURIComponent(q)}`, {
      signal: controller.signal,
    })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((users) => setState({ status: "done", users }))
      .catch((err) => {
        if (err.name !== "AbortError") {
          setState({ status: "error", users: [] });
        }
      });

    return () => controller.abort(); // cancel stale request
  }, [q]);

  return state;
}

Task: Build a reusable Modal component.

Strong questions:
- Should it close on Escape and on backdrop click?
- Should focus move into the modal and return to the
  trigger button when it closes?
- Will it be controlled by the parent (open prop)
  or manage its own open state?

Answers shape the props:
  Modal({ open, onClose, title, children,
          closeOnBackdrop = true })

Usage stays simple:
  return open ? (
    <Modal open={open} onClose={() => setOpen(false)} title="Delete item?" />
  ) : null;

When you run out of useful questions, state assumptions:

'I will assume:
 - the list has under a few hundred items
 - dates come as ISO strings
 - we support the latest Chrome and Firefox
 - no design system is available, so plain CSS.
Tell me if any of these are wrong.'

This gives the interviewer a quick chance to
correct you, without a long question session.

BEFORE YOU CODE A REACT TASK

USER
- Who uses it, on which devices?
- Keyboard and screen reader support needed?

DATA
- Where does data come from: props, API, local?
- How large can it get? Paging or filtering on server?

EDGE CASES
- Empty state? Loading state? Error state?
- Slow network or duplicate clicks?

SCOPE
- What matters most in the time we have?
- Can I use a library, or plain React only?

DAILY DRILL (15 minutes)

1. Pick a vague task: star rating, tabs, accordion,
   infinite list, file upload, OTP input.
2. Write 6 possible questions.
3. Circle the 3 whose answers change the code.
4. For each, write how the code changes:
   'If yes -> I need ___ state / ___ effect.'
5. Say the 3 questions aloud in under 30 seconds.

After two weeks you will ask the right questions
without thinking about the card.

FOR TAKE-HOME TASKS

You may not get to ask live, so:

[ ] Email 2-3 short questions early if allowed
[ ] Otherwise write an ASSUMPTIONS section
    in the README:
    - Search calls the API with a 300 ms debounce
    - Results are limited to 20 per page
    - Empty query shows recent users
[ ] Explain what you would change if an assumption
    turns out to be wrong