Code review example: Hallucinated useMount hook: the component fails at build or crashes on first render in React

Retired from the DiffDojo practice pool in October 2026; the review below is the canonical answer. An AI wrote this pull request for the task underneath. Read the diff and decide what you would say before you scroll to the review.

React · Hallucinated APIs & dependencies · intermediate

The task

Track window focus for the presence indicator

1. Show whether the current tab is focused (green dot when focused, gray when not).
2. Subscribe to the window focus/blur events when the component mounts.
3. Remove the event listeners when the component unmounts.

Adds the focus tracker for the presence indicator. Subscribes to window focus/blur on mount using React's lifecycle hook and cleans the listeners up on unmount.

Part of the team-presence header shown on every page.

The diff

The review

Issue 1: Hallucinated useMount hook: the component fails at build or crashes on first render

src/components/FocusIndicator.jsx, lines 1, 6

1. React exports no useMount. Mount-time work is written with useEffect(fn, []); the name only feels plausible because userland libraries define a useMount helper and LLM training data is full of them.
2. The import can't resolve. With strict ESM linking the build fails on the missing named export; with common CommonJS interop (webpack-style setups) it resolves to undefined and the first render throws TypeError: useMount is not a function.
3. The body is exactly right, subscribe on mount, cleanup on unmount, but the hook is fictional, so either way the component never works.

The fix: useEffect with an empty dependency array; the returned cleanup handles unmount.

The fix

import { useState, useEffect } from 'react';

export function FocusIndicator() {
  const [focused, setFocused] = useState(() => document.hasFocus());

  useEffect(() => {
    const onFocus = () => setFocused(true);
    const onBlur = () => setFocused(false);
    window.addEventListener('focus', onFocus);
    window.addEventListener('blur', onBlur);
    return () => {
      window.removeEventListener('focus', onFocus);
      window.removeEventListener('blur', onBlur);
    };
  }, []);

  return <span className={focused ? 'dot green' : 'dot gray'} />;
}

Why it matters

A hook imported from 'react' that you can't place → ask: "is this React's API or an ecosystem helper?"

Real-world stakes: this is the version-mix flavor of API hallucination, the model blends React's real API with the ecosystem's helper vocabulary (react-use and friends all ship a useMount), producing an import that reads completely natural. The textbook-perfect effect body lowers the reviewer's guard; the whole bug is the import line, and in a webpack-style plain-JS project nothing catches it before the browser throws.

Read more: react useMount does not exist, useEffect empty dependency array mount, react-use useMount library, TypeError is not a function react import

The verdict

Request changes. Hallucinated useMount hook: the component fails at build or crashes on first render

How to review React code · All code review examples