Katkat
Back

Implement and Improve React Components

SquarepointSoftware Engineer · Technical Screen
HardSoftware EngineerTechnical ScreenSoftware Engineering Fundamentals

Last updated

Implement and Improve React Components 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 two React tasks and discuss improvements:

  1. Build a reusable rating component in React.
  • Display a configurable number of icons (default
  1. with optional half-step selection.
  • Support mouse, touch, and keyboard interactions (Arrow keys, Enter/Space) and proper focus management.
  • Ensure accessibility with appropriate ARIA roles/labels and screen-reader announcements.
  • Expose controlled and uncontrolled modes (value, defaultValue, onChange) and support readOnly/disabled.
  • Allow custom icon rendering and RTL support. Include basic unit tests.
  1. Build a Todo application in React.
  • Add, edit, delete, and toggle completion of tasks.
  • Filter by All/Active/Completed and provide "clear completed".
  • Persist state to localStorage and handle empty/error states.
  • Structure components and manage state with React hooks; explain trade-offs if using a state library. Include basic tests.

Follow-ups: How would you improve the Todo component? Discuss performance (memoization, list virtualization, debounced updates), accessibility (labels, keyboard shortcuts, live announcements), UX features (inline editing, due dates, drag-and-drop), scalability (API sync with optimistic updates), and code quality (TypeScript/PropTypes, error boundaries, testing strategy).