Implement two React tasks and discuss improvements: 1) Build a reusable rating component in React. - Display a configurable number of icons (default 5) 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. 2) 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).

This question evaluates a developer's proficiency in React component design and state management, including hooks-based architecture, controlled vs uncontrolled APIs, accessibility (ARIA, keyboard and screen-reader behavior), persistence to localStorage, and unit testing.

How do I approach Other / Miscellaneous interview questions?

Other / Miscellaneous questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master other / miscellaneous interviews.

What difficulty level is this interview question?

This is a hard difficulty Other / Miscellaneous question, commonly asked during Technical Screen rounds at Squarepoint Capital.

What role is this question designed for?

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

Implement and Improve React Components | Squarepoint Capital Interview Question

React Technical Screen: Build a Rating Component and a Todo App

Assumptions and Setup

Use React 18+ with functional components and hooks.
Use JavaScript or TypeScript (you may choose).
Testing with Jest + React Testing Library (or Vitest + RTL).
No CSS framework required; inline styles or simple CSS are fine.

Task 1 — Reusable Rating Component

Implement a reusable rating component with the following features:

Display

Configurable number of icons (default 5).
Optional half-step selection (configurable step; default 1, allow 0.5).

Interactions

Mouse, touch, and keyboard (Arrow keys, Home/End, Enter/Space).
Proper focus management.

Accessibility

Appropriate ARIA roles/labels.
Screen-reader announcements of changes.

Controlled and uncontrolled modes: value, defaultValue, onChange.
readOnly and disabled support.
Custom icon rendering.
RTL support.

Tests

Include basic unit tests.

Task 2 — Todo Application

Implement a Todo application with:

Core Features

Add, edit, delete, and toggle completion of tasks.
Filter by All / Active / Completed.
"Clear completed" action.

Persistence and States

Persist state to localStorage.
Handle empty and error states.

Architecture

Structure components and manage state with React hooks.
If you use a state library, explain trade-offs.

Tests

Include basic tests.

Follow-Ups

Discuss how you would further improve the Todo app in terms of:

Performance: memoization, list virtualization, debounced updates.
Accessibility: labels, keyboard shortcuts, live announcements.
UX: inline editing, due dates, drag-and-drop.
Scalability: API sync with optimistic updates.
Code quality: TypeScript/PropTypes, error boundaries, testing strategy.

React Technical Screen: Build a Rating Component and a Todo App

Assumptions and Setup

Use React 18+ with functional components and hooks.
Use JavaScript or TypeScript (you may choose).
Testing with Jest + React Testing Library (or Vitest + RTL).
No CSS framework required; inline styles or simple CSS are fine.

Task 1 — Reusable Rating Component

Implement a reusable rating component with the following features:

Display

Configurable number of icons (default 5).
Optional half-step selection (configurable step; default 1, allow 0.5).

Interactions

Mouse, touch, and keyboard (Arrow keys, Home/End, Enter/Space).
Proper focus management.

Accessibility

Appropriate ARIA roles/labels.
Screen-reader announcements of changes.

Controlled and uncontrolled modes: value, defaultValue, onChange.
readOnly and disabled support.
Custom icon rendering.
RTL support.

Tests

Include basic unit tests.

Task 2 — Todo Application

Implement a Todo application with:

Core Features

Add, edit, delete, and toggle completion of tasks.
Filter by All / Active / Completed.
"Clear completed" action.

Persistence and States

Persist state to localStorage.
Handle empty and error states.

Architecture

Structure components and manage state with React hooks.
If you use a state library, explain trade-offs.

Tests

Include basic tests.

Follow-Ups

Discuss how you would further improve the Todo app in terms of:

Performance: memoization, list virtualization, debounced updates.
Accessibility: labels, keyboard shortcuts, live announcements.
UX: inline editing, due dates, drag-and-drop.
Scalability: API sync with optimistic updates.
Code quality: TypeScript/PropTypes, error boundaries, testing strategy.

Implement and Improve React Components

Quick Overview

React Technical Screen: Build a Rating Component and a Todo App

Assumptions and Setup

Task 1 — Reusable Rating Component

Task 2 — Todo Application

Follow-Ups

Solution

Comments (0)

Implement and Improve React Components

Quick Overview

React Technical Screen: Build a Rating Component and a Todo App

Assumptions and Setup

Task 1 — Reusable Rating Component

Task 2 — Todo Application

Follow-Ups

Solution

Comments (0)