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.