advanced

Review: a fetch that loses the race to itself

This is recall. The code looks finished and is wrong. Find the defect and fix it. You are graded on tests you cannot see.

You asked a model for a hook that loads a user's name by id. It produced this, with a test. The test passes.

import { useEffect, useState } from 'react'

export type FetchName = (id: number) => Promise<string>

/**
 * Loads the display name for a user id, reloading when the id changes.
 */
export function useUserName(id: number, fetchName: FetchName): string | null {
  const [name, setName] = useState<string | null>(null)

  useEffect(() => {
    fetchName(id).then((loaded) => {
      setName(loaded)
    })
  }, [id, fetchName])

  return name
}

review — find the defectCtrl+↵ submits · Ctrl+Shift+↵ runsstarter code