How do I approach Software Engineering Fundamentals interview questions?

Software Engineering Fundamentals questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master software engineering fundamentals interviews.

What difficulty level is this interview question?

This is a medium difficulty Software Engineering Fundamentals question, commonly asked during Onsite rounds at Nordstrom.

What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Nordstrom during technical interviews.

Implement React logic with TypeScript hooks | Nordstrom Interview Question

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

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

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.
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).
TypeScript:
- Correctly type event handlers (e.g., React.ChangeEvent <HTMLInputElement> , React.MouseEvent <HTMLButtonElement> ).
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.
Security:
- Discuss relevant UI security concerns (e.g., XSS) and mitigations.
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.

Constraints & Assumptions

Preserve the scope, facts, inputs, and requested outputs from the prompt above.
If the prompt leaves a detail unspecified, state a reasonable assumption before relying on it.
Keep the answer interview-ready: concise enough to present, but concrete enough to implement or evaluate.

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?

Quick Overview

Requirements

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.

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).

TypeScript:

Correctly type event handlers (e.g., React.ChangeEvent <HTMLInputElement> , React.MouseEvent <HTMLButtonElement> ).

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.

Security:

Discuss relevant UI security concerns (e.g., XSS) and mitigations.

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.

Constraints & Assumptions

Preserve the scope, facts, inputs, and requested outputs from the prompt above.

If the prompt leaves a detail unspecified, state a reasonable assumption before relying on it.

Keep the answer interview-ready: concise enough to present, but concrete enough to implement or evaluate.

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?

Implement React logic with TypeScript hooks

Quick Overview

Implement React logic with TypeScript hooks

Implement React logic with TypeScript hooks

React + TypeScript List Manager

Context

Requirements

Assumptions

Constraints & Assumptions

Clarifying Questions to Ask Guidance

What a Strong Answer Covers Guidance

Follow-up Questions Guidance

Write your answer

Implement React logic with TypeScript hooks

Quick Overview

Implement React logic with TypeScript hooks

Implement React logic with TypeScript hooks

React + TypeScript List Manager

Context

Requirements

Assumptions

Constraints & Assumptions

Clarifying Questions to Ask Guidance

What a Strong Answer Covers Guidance

Follow-up Questions Guidance

Write your answer