React Developer Assessment Template

Which hook should you use to subscribe to an external store (e.g. Redux store) while following React 18 concurrent-rendering rules?

• A.useState with useEffect
• B.useReducer
• C.useSyncExternalStore
• D.useContext

Hint: Concurrent rendering requires a specific subscription pattern.

A component re-renders even though its props and state haven't changed. Its parent re-renders frequently. Which of the following will NOT reduce re-renders?

• A.Wrapping the component in React.memo
• B.Moving state out of the parent
• C.Using useMemo on the props
• D.Replacing useState with useReducer

Implement a `useDebouncedValue<T>(value: T, delayMs: number): T` hook that returns the input value, but only updated after `delayMs` of stability. Include cleanup so rapid re-renders don't leak timers.

Hint: Clean up with the useEffect return function.

Build an accessible autocomplete component: - Controlled input with a suggestions dropdown - Keyboard navigation (ArrowUp/Down, Enter, Escape) - ARIA roles and aria-activedescendant - Closes on outside click Provide props: `suggestions: string[]`, `onSelect: (v: string) => void`.

Given a list of 10,000 products with `{ id, name, price }`, build a `ProductList` that: - Renders only visible rows (virtualization) - Filters in-memory by a search input - Does NOT cause a re-render on each keystroke across all rows

Explain when you'd use `useLayoutEffect` instead of `useEffect`. What problem does it solve, and what are the tradeoffs? Provide a concrete example.

Your React app has a 3-second TTI on mobile. Walk through how you'd investigate and the top 5 interventions you'd consider. Include tradeoffs of each.