Autocomplete (Online API)

Difficulty: Advanced

Problem Statement

Fetch remote suggestions (GitHub users) based on debounced search input.

Live Demo

Try the running app below — this is the target behavior for the challenge.

Autocomplete (Online API) — Live Demo

What Interviewers Expect

• Debounce API calls.
• Loading and error states.
• Ignore/cancel stale responses.

Step-by-Step Implementation

Step 1 — Debounced fetch

Delay network call until user pauses typing.

timer.current = setTimeout(() => search(q), 400);

Step 2 — Fetch + render

Call GitHub search API and map results.

fetch(`https://api.github.com/search/users?q=${q}&per_page=5`)

Step 3 — Cleanup

Clear timeout on unmount to avoid leaks.

useEffect(() => () => clearTimeout(timer.current), []);

Complete Implementation

Copy-paste ready single-file solution. Use this as your reference after attempting the challenge yourself, or paste it into CodeSandbox / StackBlitz to run locally.

App.jsx

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

export default function App() {
  const [term, setTerm] = useState('');
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const timer = useRef(null);

  const search = useCallback((query) => {
    if (!query.trim()) {
      setUsers([]);
      return;
    }

    setLoading(true);
    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(query)}&per_page=5`)
      .then((response) => response.json())
      .then((data) => setUsers(data.items || []))
      .catch(() => setUsers([]))
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => () => clearTimeout(timer.current), []);

  const onChange = (event) => {
    const query = event.target.value;
    setTerm(query);
    clearTimeout(timer.current);
    timer.current = setTimeout(() => search(query), 400);
  };

  return (
    <div>
      <input
        value={term}
        onChange={onChange}
        placeholder="Search GitHub users"
      />
      {loading && <p style={{color: '#666'}}>Loading…</p>}
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.login}</li>
        ))}
      </ul>
    </div>
  );
}

Final Checklist

• UI works for primary flow
• Edge cases handled (empty/disabled/loading where relevant)
• State updates are immutable
• Components are readable and reasonably split
• You can explain trade-offs out loud in an interview

Next Challenge

Continue to the next item in the sidebar when you're comfortable implementing this from scratch in 30–45 minutes.