Implement React logic with TypeScript hooks

Read the full interview experience this question came from →

Quick Overview

Implement React logic with TypeScript hooks evaluates requirements, assumptions, structured reasoning, trade-offs, and verification in a realistic interview setting. A strong answer states assumptions, handles edge cases, explains trade-offs, and shows how to validate the result clearly.

Implement React logic with TypeScript hooks

Company: Nordstrom

Role: Software Engineer

Category: Software Engineering Fundamentals

Difficulty: medium

Interview Round: Onsite

Using React and TypeScript, implement a small UI that manages a list (add, edit, remove, filter). Use useState, useCallback, onChange, onClick, and useRef appropriately, and map over lists with stable keys. Explain controlled vs. uncontrolled inputs, asynchronous state updates, and how you pass and type parameters for event handlers. Discuss relevant security concerns in the UI and how you would mitigate them. If time permits, describe how you would extend the solution and how you would test it.

Overview: Implement React logic with TypeScript hooks evaluates requirements, assumptions, structured reasoning, trade-offs, and verification in a realistic interview setting. A strong answer states assumptions, handles edge cases, explains trade-offs, and shows how to validate the result clearly.

Read the full Nordstrom Software Engineer interview experience this question came from

|Home/Software Engineering Fundamentals/Nordstrom
Nordstrom logo
Nordstrom
Jul 17, 2025
mediumSoftware EngineerOnsiteSoftware Engineering Fundamentals
8
0

Implement React logic with TypeScript hooks

React + TypeScript List Manager

Context

You are building a small UI during an onsite interview. Implement a list manager using React and TypeScript that supports add, edit, remove, and filter operations. Use modern React hooks and correct TypeScript typings.

Requirements

  1. Implement a list of items with these features:
    • Add a new item.
    • Edit an existing item inline.
    • Remove an item.
    • Filter items by a text query.
  2. React patterns and hooks:
    • useState for state.
    • useCallback for event handlers.
    • onChange for input changes; onClick for buttons.
    • useRef for at least one uncontrolled input or focusing.
    • Map over lists with stable keys (do not use array index).
  3. TypeScript:
    • Correctly type event handlers (e.g., React.ChangeEvent <HTMLInputElement> , React.MouseEvent <HTMLButtonElement> ).
  4. Explain:
    • Controlled vs. uncontrolled inputs (what you chose and why).
    • Asynchronous state updates and when to use functional updates.
    • How you pass and type parameters for event handlers.
  5. Security:
    • Discuss relevant UI security concerns (e.g., XSS) and mitigations.
  6. If time permits:
    • Describe extensions and a testing strategy.

Assumptions

  • Use a single React component for simplicity.
  • Items can be a simple shape: { id: string, text: string }.
  • Filter is case-insensitive substring match.

Clarifying Questions to Ask Guidance

  • Clarify the goal, inputs, constraints, stakeholders, and success criteria.
  • State assumptions before using them.
  • Keep the answer grounded in the prompt rather than adding outside facts.

What a Strong Answer Covers Guidance

  • A structured framing of the problem and constraints.
  • A concrete approach with trade-offs and edge cases.
  • A way to validate the answer and communicate the recommendation.

Follow-up Questions Guidance

  • What assumption is most important to validate first?
  • What could make the answer fail in practice?
  • How would you explain the result to a non-technical stakeholder?
Loading comments...

Browse More Questions

More Software Engineering Fundamentals•More Nordstrom•More Software Engineer•Nordstrom Software Engineer•Nordstrom Software Engineering Fundamentals•Software Engineer Software Engineering Fundamentals