React Interview Prep

Exercises

0/60 done

60 results

This counter increments but the UI never updates. Find and fix the bug.

React HooksEasyDebug

This component should fetch user data once on mount, but it fetches in an infinite loop. Fix it.

React HooksEasyDebug

Write a `useToggle` custom hook that returns `[value, toggle]` where `toggle` flips the boolean.

React HooksEasy

Items in this list flicker and lose focus when reordering. The key prop is set — what's wrong?

React Lists & KeysEasyDebug

Write a `FilterableList` component that accepts an array of `{ id, name, category }` items and a `selectedCategory` prop. Render only items matching the category, or all items if `selectedCategory` is null.

React Lists & KeysEasy

The form reloads the page on submit instead of running the handler. Fix it.

React FormsEasyDebug

Write a `groupBy(array, key)` function that groups an array of objects by a given key.

JavaScript FundamentalsEasy

This function is supposed to check if two objects are equal by value, but always returns false. Fix it.

JavaScript FundamentalsEasyDebug

The flex child should take up remaining horizontal space but it's only as wide as its content. Fix it.

CSS & LayoutEasyDebug

This button is keyboard-inaccessible and invisible to screen readers. Rewrite it to be accessible.

AccessibilityEasy

Make this image carousel accessible. It currently has no keyboard navigation or screen reader announcements.

AccessibilityEasy

Type these React component props. The component renders a user card with name, avatar URL, role ('admin' | 'user' | 'guest'), and an optional onClick handler.

TypeScript & TypesEasy

The count displayed in the interval log is always stale (shows old value). Why, and how do you fix it?

React HooksMediumDebug

This component re-renders infinitely. Find the cause.

React HooksMediumDebug

The input is always one keystroke behind — typing 'hello' shows 'hell'. Fix it.

React HooksMediumDebug

This custom hook throws 'Cannot read properties of null' on first render. Fix it without changing the API call.

React HooksMediumDebug

Write a `useLocalStorage` hook that syncs state with localStorage. It should accept a key and initial value.

React HooksMedium

Write a `useDebounce` hook. It should return a debounced version of the value that only updates after the user stops changing it for `delay` ms.

React HooksMedium

This component works but has performance issues — it re-runs the expensive filter on every keystroke. Refactor to fix the performance problem.

React HooksMediumRefactor

Every time the parent re-renders, `ExpensiveChild` re-renders too even though its props didn't change. Fix it.

React RenderingMediumDebug

Write a component `VirtualList` that renders only visible items from a large array. Assume each item is 40px tall and the container is 400px (shows 10 items). Only render items in the visible window plus 2 overscan items on each side.

React RenderingMedium

Clicking 'Add Tag' appends to the array but React doesn't detect the change and the UI doesn't update. Fix it.

React StateMediumDebug

Write a `useReducer`-based shopping cart. Support `ADD_ITEM`, `REMOVE_ITEM`, and `CLEAR_CART` actions. Each item has `{ id, name, price, qty }`.

React StateMedium

Every component using `useTheme()` re-renders when *any* context value changes, including unrelated state. Identify the problem and fix it.

React ContextMediumDebug

Implement a `ThemeProvider` and `useTheme` hook. The theme should be persisted to localStorage and default to the system preference (`prefers-color-scheme`).

React ContextMedium

Write a controlled `RegistrationForm` with fields: name, email, password. Validate on submit: all fields required, email must contain '@', password at least 8 chars. Show per-field errors.

React FormsMedium

This form has repetitive state and handlers for each field. Refactor to use a single state object and a generic change handler.

React FormsMediumRefactor

This Next.js page crashes with 'window is not defined' during build. Fix it.

Next.jsMediumDebug

This Next.js component using `useSearchParams()` breaks the whole page with a build error about missing Suspense boundary. Fix it.

Next.jsMediumDebug

Write a Next.js Server Component that fetches a list of posts and renders them. Add loading and error handling using App Router file conventions.

Next.jsMedium

Write a Next.js Route Handler (`app/api/subscribe/route.js`) that accepts a POST request with `{ email }`, validates the email, and returns appropriate JSON responses.

Next.jsMedium

This async function swallows errors silently and the UI never shows an error state. Fix it.

Async & PromisesMediumDebug

Write a `retry(fn, times)` utility that retries an async function up to `times` attempts with exponential backoff (100ms, 200ms, 400ms...).

Async & PromisesMedium

This deep-copy function fails for nested objects containing arrays. Identify and fix the issue.

JavaScript FundamentalsMediumDebug

Implement `pipe(...fns)` — a function that composes multiple functions left-to-right, passing the result of each as input to the next.

JavaScript FundamentalsMedium

This CSS grid layout should show 3 equal columns, but the third column is much narrower than the others. Find the bug.

CSS & LayoutMediumDebug

The absolutely positioned tooltip appears relative to the viewport instead of its parent button. Fix it.

CSS & LayoutMediumDebug

Write CSS for a sticky header that stays at the top while scrolling, with a centered content column (max 800px) and a card below with a drop shadow.

CSS & LayoutMedium

Build an accessible modal dialog. It should trap focus inside when open, close on Escape, and restore focus to the trigger when closed.

AccessibilityMedium

Write a `LazyImage` component that uses the Intersection Observer API to only load images when they enter the viewport.

PerformanceMedium

Implement a compound component pattern for a Tabs UI. `<Tabs>`, `<TabList>`, `<Tab>`, and `<TabPanel>` should share state without prop drilling.

React PatternsMedium

Implement the render props pattern for a `Mouse` component that tracks cursor position and shares it with any child render function.

React PatternsMedium

The `ErrorBoundary` doesn't catch errors thrown inside `useEffect` or async functions. Explain why and show how to bridge the gap.

React PatternsMediumDebug

Type a generic `useAsync<T>` hook that tracks the state of an async function and returns `{ data: T | null, loading, error }`.

TypeScript & TypesMedium

TypeScript says this code is correct but it crashes at runtime. Explain why type assertions are dangerous here and show the safer alternative.

TypeScript & TypesMediumDebug

Write React Testing Library tests for a `Counter` component with +/- buttons. Test: starts at 0, increments, doesn't go below 0.

TestingMedium

Write a React hook `useOnClickOutside(ref, handler)` that calls `handler` when a click occurs outside the element referenced by `ref`.

Browser APIsMedium

Each button click should add 3 to the count, but it only adds 1. Fix it.

React HooksHardDebug

The useEffect cleanup runs but the subscription is still active after unmount, causing a memory leak. Find the bug.

React HooksHardDebug

Write a `useFetch` hook that returns `{ data, loading, error }` and re-fetches whenever the URL changes. Cancel in-flight requests on cleanup.

React HooksHard

This list re-renders all items whenever any item changes. Fix it so only the changed item re-renders.

React RenderingHardDebug

This dynamic route generates a 404 for all product pages in production (static export). Fix it.

Next.jsHardDebug

These three API calls run sequentially and take 3x as long as necessary. Refactor to run them in parallel.

Async & PromisesHardDebug

Implement `memoize(fn)` — caches the result of a function call so the same arguments return the cached result without recomputing.

JavaScript FundamentalsHard

Build a responsive nav bar: logo on the left, nav links in the center, CTA button on the right. On mobile (< 768px), hide the links and show a hamburger icon instead.

CSS & LayoutHard

This component causes layout thrash on every render by interleaving DOM reads and writes. Identify and fix the performance issue.

PerformanceHardDebug

This component re-renders the expensive chart every time any dashboard state changes. Refactor to only re-render the chart when `chartData` actually changes.

PerformanceHardRefactor

Implement a Higher-Order Component `withAuth(WrappedComponent)` that redirects to `/login` if the user is not authenticated, otherwise renders the component with the user passed as a prop.

React PatternsHard

Write tests for a `LoginForm` that calls `onLogin` with credentials on submit, shows an error if the API call fails, and disables the button while loading.

TestingHard

Write a `useWebSocket(url)` hook that maintains a WebSocket connection, reconnects on disconnect (max 5 retries with 2s delay), and returns `{ lastMessage, sendMessage, status }`.

Browser APIsHard

1 / 60

EasyDebug

Q1.This counter increments but the UI never updates. Find and fix the bug.

buggy.jsFind & fix the bug

Loading editor…

Run your code

Hit Run to see output here. React/JSX code renders live.

Coding

Coding