Katkat

Implement Hook and Modify UI Interactions

Scale AISoftware Engineer · Technical Screen

Last updated

This question evaluates a candidate's ability to implement reusable React hooks, manage asynchronous data fetching with loading/error/refetch semantics, transform API responses, and wire component state for modal, collapsible list, and button-driven UI interactions.

You are given starter code with basic API and UI scaffolding in a coding environment. Complete the following tasks:

  1. Implement a custom React hook for function components that calls the provided API and converts the returned data into a different specified format. Use useEffect with an async function and return transformed data along with loading and error states.
  2. Modify the existing UI to: open and close a modal; expand and collapse a list; and add several buttons that perform simple, specified actions. Ensure all interactions are properly wired to component state and the hook.