React Interviews: Don't Get a Red Card on Your Coding Challenge

Source: Dev.to

Look My Friend, Let’s Talk About React Hooks Like We’re Dancing Bachata

Look, I see this academic text you have here. It’s okay, but it’s a bit… dry, no? Like a football match with zero goals. Basically, you want to show the interviewer you are a senior who has been in the trenches since the jQuery “dark ages,” not just someone who watched a YouTube tutorial yesterday.

⚽ The Midfield General: Why We Actually Do Live Coding

Actually, the interviewer doesn’t care if you can type fast. They want to see if you are a Playmaker.

• Tactical Awareness: Do you ask questions before coding? Or do you just sprint into a tackle without looking at the ball?
• The “VAR” Moment: When you hit a Red Card (a bug), do you panic or do you check the replay (the console) calmly?
• Team Chemistry: Can you explain your code to a teammate? If you can’t explain it, you don’t own it.

🕺 1, 2, 3, Tap! Building the useDebounce Hook

Explain useDebounce like a Bachata transition. You don’t just jump into the next move immediately. You wait for the beat. You lead, you wait for the “4” or “8” count (the delay), and then you execute the turn.

If the follower (the user typing) changes their mind mid‑step, you reset the count. 1, 2, 3, Tap!

import { useState, useEffect, useRef } from 'react';

// This is our Bachata Step: We wait for the right beat
function useDebounce<T>(value: T, delay: number = 500): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  // The 'timeoutRef' is like the coach on the sidelines holding the stopwatch
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    // If the player starts a new sprint (user types),
    // we blow the whistle and stop the previous timer.
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    // We set a new timer. Like waiting for the striker to get in position.
    timeoutRef.current = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // The Cleanup: This is like cooling down after the match.
    // Very important or you get a cramp (memory leak).
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [value, delay]); // We only dance when the value or the rhythm changes!

  return debouncedValue;
}

🥅 Why This Logic is a “Top Corner” Goal

Most juniors forget the Cleanup. If you don’t clear the timeout, it’s like having 11 players on the pitch and then accidentally subbing on 5 more without anyone leaving—total chaos.

• useRef is your Sideline: We use it for the timer because changing a ref doesn’t trigger a re‑render. Using useState for the timer ID would cause unnecessary re‑renders.
• The Beat (Dependencies): If you leave the [value, delay] array empty, your hook is “injured.” It won’t react to anything.
• Smooth Flow: Updating the UI only after the user finishes typing feels like a perfect Bachata flow—no stuttering, no lag, just smooth transitions.

🚩 Avoiding the “Red Card” (Common Mistakes)

• The “Static” Player: Not using a cleanup function leads to memory leaks—like leaving the stadium lights on after everyone went home.
• Over‑Engineering: Don’t reach for useMemo for every variable. That’s like trying to do a backflip during a penalty kick. Keep it simple and clean.
• Silence on the Pitch: If you don’t talk while you code, the interviewer thinks you are stuck. Even if you have a Cramp (a bug), talk through it!

👟 Pro Tip from the Pitch

Secret: In an interview, if you get stuck on the syntax of setTimeout, just say: “Actually, I know I need a timer here to delay the state update, let me just mock the logic first.” Interviewers love a developer who understands the tactics more than the syntax. Syntax you can Google; logic is how you win the Champions League.

If you found this interesting, check out more of my work or just drop a hello.

Curious about AI?
You can also check out my book: Surrounded by AI