State interview questions
Practice 131 questions on state. Each runs in a real in-browser editor with Jest tests and a worked, diagram-backed solution.
131 questions
- EASY
Accordion
Build an accordion component with stacked sections whose content panels expand and collapse on click.
20 minUI / FrameworksGoogle · Amazon · MetaAngularReactHTML / CSS / JSVue - EASY
Basic Autocomplete
Build an autocomplete input that filters a static list and lets you pick a suggestion.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Character Counter Textarea
Build a textarea with a live character counter that warns as it nears a maximum length.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Color Swatch Picker
Build a swatch color picker where clicking a swatch selects it and previews the chosen color.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Copy to Clipboard Button
Build a button that copies text to the clipboard and shows a transient copied confirmation.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Countdown Timer
Build a countdown timer that ticks down from a start time and can start, pause, and reset.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Counter
Build a counter component that increments a displayed number each time a button is clicked.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
FAQ Disclosure
Build a list of FAQ questions that each expand to reveal an answer on click.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Like Button
Build a Like button that toggles between liked and unliked states with matching visual feedback.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Modal Dialog
Build a reusable modal dialog component that you can open from a trigger and close with a button.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Pagination UI
Build pagination controls with previous/next and numbered pages that report the current page.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Password Strength Meter
Build a password field with a live strength meter that scores the input as you type.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Progress Bar
Build a progress bar component that visualizes the percentage completion of an operation.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Progress Bars
Build a component that renders a list of progress bars which animate from empty to full as they mount.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Segmented Control
Build a segmented control where clicking a segment selects it and highlights the active option.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Toast Notification
Build a toast that appears on trigger and auto-dismisses after a few seconds, with manual close.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Toggle Switch
Build an on/off toggle switch that flips state on click and slides its knob to reflect it.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Tooltip
Build a tooltip that shows on hover/focus of a trigger and hides on leave/blur.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
Traffic Light
Build a traffic light that cycles green to yellow to red on a timer and loops indefinitely.
15 minUI / FrameworksAngularReactHTML / CSS / JSVue - EASY
useBoolean
Implement a hook that exposes a boolean value alongside setTrue, setFalse, and toggle helpers.
15 minJavaScript - EASY
useCounter
Implement a hook that exposes a numeric count along with increment, decrement, and reset helpers.
15 minJavaScript - EASY
useCycle
Implement a hook that returns the current value of a sequence and advances to the next on demand.
15 minJavaScript - EASY
useCycleList
Implement a hook that steps through an array with wraparound, exposing the current item and next/prev/set.
15 minJavaScript - EASY
useDefault
Implement a hook that falls back to a default value whenever the underlying state becomes null or undefined.
15 minJavaScript - EASY
useObject
Implement a hook that holds an object in state and exposes helpers to merge updates or reset its value.
15 minJavaScript - EASY
usePrevious
Implement a hook that remembers and returns the value a state held on the previous render.
15 minJavaScript - EASY
useSet
Implement a hook that stores a Set in state and exposes add, delete, has, and clear helpers.
15 minJavaScript - EASY
useStateWithReset
Implement a useState-like hook that also returns a reset function which restores the initial value.
15 minJavaScript - EASY
useToggle
Implement a hook that holds a boolean and returns a stable toggle function to flip its value.
15 minJavaScript - MEDIUM
A/B Test Bucketing
Assign users to weighted experiment variants deterministically, with a traffic gate and independent buckets per experiment.
25 minJavaScript - MEDIUM
Accordion II
Build an accordion component with the correct ARIA roles, states, and properties for screen readers.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Autoplay Carousel
Build an image carousel that auto-advances on a timer, pauses on hover, and has manual controls.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Connect Four
Build a two-player Connect Four game where discs fall to the lowest empty slot and four-in-a-row wins.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
createGlobalState
Build a useState shared by every component that calls it, by subscribing React to a store that lives outside it.
25 minJavaScript - MEDIUM
createStore + useSelector
Build a store whose subscribers each re-render only when the slice they selected changes.
25 minJavaScript - MEDIUM
Currency Converter
Build a currency converter with two linked amount fields that recompute from an exchange rate.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Data Table
Build a users data table that paginates rows with page-size and page-navigation controls.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Data Table II
Build a users data table that lets you sort by any column in ascending or descending order.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Date Picker
PREMIUMBuild a calendar date picker that renders a month grid, navigates between months, and selects a day.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Dice Roller
Build a dice roller that lets you pick a count of six-sided dice, roll them, and display the resulting faces.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Digital Clock
Build a 7-segment style digital clock that updates to display the current time.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Dropdown Menu
Build an accessible dropdown menu that opens on click, closes on outside-click and Escape, and supports arrow-key navigation.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Feature Flag Client
PREMIUMEvaluate feature flags with targeting rules and a deterministic percentage rollout that stays sticky per user.
25 minJavaScript - MEDIUM
File Explorer
Build a file explorer that renders a nested folder hierarchy and lets you expand and collapse directories.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Grid Lights
Build a grid of cells that light up on click and then deactivate one by one in the reverse order they were activated.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Image Carousel
Build an image carousel that lets you page through a sequence of images with previous and next controls.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Image Carousel II
Build an image carousel with smooth slide transitions between images.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Job Board
Build a job board that fetches and renders recent Hacker News job postings with paginated loading.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Kanban Board
PREMIUMBuild a three-column board where cards drag between columns and each column's count updates.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Make Counter II
Implement a factory that returns a counter object with methods to read, increment, decrement, and reset its value.
25 minJavaScript - MEDIUM
Memory Game
Build a memory card-matching game where players flip cards to find matching pairs.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Mini Jotai Atoms
Build atom-based state with primitive and derived atoms that recompute and notify subscribers on change.
25 minJavaScript - MEDIUM
Mini Redux
PREMIUMBuild a Redux core with createStore, combineReducers, and applyMiddleware over a subscribe/dispatch loop.
25 minJavaScript - MEDIUM
Multi-Select
Build a multi-select where chosen options become removable chips and the rest stay in the list.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Multi-Step Form
Build a wizard form with next/back navigation, per-step validation, and a progress indicator.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Nested Comments
PREMIUMBuild a threaded comments tree where each comment can be replied to and collapsed recursively.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Notification Center
Build a notification center with an unread badge, mark-as-read, and dismiss.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Pixel Art
Build a pixel art editor where you pick a color from a palette and paint individual cells on a grid canvas.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Progress Bars II
Build a list of progress bars that fill in sequence, each one starting only after the previous bar finishes.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Progress Bars III
Build a list of progress bars that fill concurrently with at most three running at the same time.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Range Slider
Build a dual-handle range slider that picks a min and max value by dragging each handle.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Redux Middleware (Thunk + Logger)
PREMIUMImplement the curried Redux middleware chain with working thunk and logger middleware.
25 minJavaScript - MEDIUM
Reselect Selectors
PREMIUMBuild memoized selectors that recompute only when their input selections change by reference.
25 minJavaScript - MEDIUM
Resizable Split Pane
Build two panes split by a draggable divider that resizes them within min and max bounds.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Resumable Interval
Implement an interval helper that exposes start, pause, and resume controls while preserving elapsed progress.
25 minJavaScript - MEDIUM
Shopping Cart
Build a cart where quantity changes update line totals and a grand total live.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Signals (signal / computed / effect)
PREMIUMBuild reactive signals with automatic dependency tracking so computed values and effects update on change.
25 minJavaScript - MEDIUM
Snake Game
PREMIUMBuild the classic snake game on a grid with keyboard control, growth on eating, and game over.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Sortable List
PREMIUMBuild a list whose items reorder by dragging, with a live drop indicator.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
SSE Frame Decoder
PREMIUMDecode a Server-Sent Events stream arriving in arbitrary chunks into discrete parsed events.
25 minJavaScript - MEDIUM
Star Rating
Build an interactive star rating with hover preview and half-star support.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Star Rating
Build a star rating component where users click a star to set the rating shown by filled icons.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Stopwatch
Build a stopwatch widget that measures elapsed time with start, stop, and reset controls.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Streaming Chat Store Reducer
PREMIUMBuild a pure, immutable reducer that opens an assistant message, appends streamed deltas, and finalizes it.
25 minJavaScript - MEDIUM
Tabs
Build a tabs component that shows one panel at a time based on the currently selected tab.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Tabs II
Build a tabs component with the correct ARIA roles, states, and properties for assistive tech.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Tic-tac-toe
Build a two-player tic-tac-toe game that detects wins and draws on a 3x3 board.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Todo List
Build a Todo List component with add and delete actions, with focus on functionality over styling.
25 minUI / FrameworksGoogle · Meta · MicrosoftAngularReactHTML / CSS / JSVue - MEDIUM
Transfer List
Build a component that moves selected items back and forth between two side-by-side lists.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Turtle
Build a Turtle class that tracks position and heading as you issue movement and turn commands on a 2D plane.
25 minJavaScript - MEDIUM
Undo / Redo Manager
PREMIUMImplement a class that tracks value history and exposes undo and redo navigation across the timeline.
25 minJavaScript - MEDIUM
Undoable Counter
Build a counter that keeps a history of values so you can undo and redo each change.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
Undoable Database
Build a user database class that supports CRUD operations plus undo and redo across the operation history.
25 minJavaScript - MEDIUM
useArray
Implement a hook that manages an array along with helpers to push, remove, update, and clear items.
25 minJavaScript - MEDIUM
useBoolean II
Implement an optimized useBoolean hook whose returned setters keep stable identity across renders.
25 minJavaScript - MEDIUM
useControllableValue
PREMIUMImplement a hook that lets one component work both controlled and uncontrolled, deciding the mode from its props.
25 minJavaScript - MEDIUM
useCountdown
Implement a hook that drives a countdown timer with start, pause, and reset controls.
25 minJavaScript - MEDIUM
useDynamicList
Implement a hook that manages a list whose items keep stable keys across inserts, removals, and reorders.
25 minJavaScript - MEDIUM
useGetState
Implement a useState variant that also returns a getter for reading the newest state from inside stale closures.
25 minJavaScript - MEDIUM
useList
Implement a hook managing an array with immutable helpers — push, removeAt, updateAt, insertAt, clear, and set.
25 minJavaScript - MEDIUM
useMap
Implement a hook that wraps a JavaScript Map with set, delete, and clear helpers backed by state.
25 minJavaScript - MEDIUM
useMediatedState
Implement a useState-like hook that runs every incoming value through a mediator before committing it.
25 minJavaScript - MEDIUM
useMethods
Implement a hook that turns a map of state transitions into bound, stable action methods over a reducer.
25 minJavaScript - MEDIUM
usePagination
Implement a hook that manages page state over a total count, exposing page, pageCount, and next/prev/go with clamping.
25 minJavaScript - MEDIUM
usePreviousDistinct
Implement a hook that remembers the last value that actually differed from the current one, with a customizable comparator.
25 minJavaScript - MEDIUM
useQueue
Implement a hook wrapping a FIFO queue with add, remove, clear, and first/last/size accessors.
25 minJavaScript - MEDIUM
useReactive
Implement a hook whose state object you mutate directly, and reckon with what that costs React.
25 minJavaScript - MEDIUM
Users Database
Build a CRUD interface to list, filter, create, edit, and delete users backed by local state.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - MEDIUM
useSelections
Implement a hook that tracks a multi-select over a list, with an all/none/partial header state that stays honest.
25 minJavaScript - MEDIUM
useStateWithHistory
Implement a useState variant that records value history and exposes back, forward, and go over it.
25 minJavaScript - MEDIUM
useStep
Implement a hook that drives a multi-step flow with next, previous, reset, and bounded index controls.
25 minJavaScript - MEDIUM
useUrlState
Implement a useState that lives in the query string, staying shareable without burying the back button.
25 minJavaScript - MEDIUM
useValidatedState
Implement a useState variant that reports whether the current value passes a validator, without an extra render.
25 minJavaScript - MEDIUM
Whack-A-Mole
Build the arcade game where moles randomly appear in a grid and players click them to score.
25 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Accordion III
PREMIUMBuild a fully accessible accordion with keyboard navigation per the ARIA authoring practices guide.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Backbone Model
PREMIUMImplement a Backbone-style Model class that stores attributes and emits change events per key.
40 minJavaScript - HARD
Calendar Scheduler
PREMIUMBuild a week-view scheduler where events render in time slots and can be added by clicking a slot.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Data Table IV
PREMIUMBuild a generalized data table component that supports pagination, column sorting, and per-column filtering.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Data Table V
PREMIUMBuild a data table with sortable columns, pagination, and row selection over a dataset.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Image Carousel III
PREMIUMBuild an image carousel that smoothly transitions between images while keeping the DOM footprint minimal.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Lazy Tree View
PREMIUMBuild a collapsible tree that lazily loads a node's children the first time it is expanded.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Minesweeper
PREMIUMBuild Minesweeper with flood-fill reveal, flagging, and win/lose detection.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Mini MobX
Build MobX-style observables with autorun and computed that re-run when the data they read changes.
40 minJavaScript - HARD
Mini React Query Core
PREMIUMBuild a framework-agnostic query cache with request dedup, staleTime, subscribers, and invalidation.
40 minJavaScript - HARD
Nested Checkboxes
PREMIUMBuild a nested checkbox tree where parent state reflects its children and toggling a parent cascades down.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Optimistic Mutation Manager
PREMIUMApply optimistic updates immediately and roll them back on failure, even with concurrent mutations.
40 minJavaScript - HARD
Progress Bars IV
PREMIUMBuild progress bars that fill concurrently up to three at a time, and let the user pause and resume each one.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Redux-Saga Effect Runner
PREMIUMBuild a redux-saga-style interpreter that runs a generator of declarative effects and resumes it with each result.
50 minJavaScript - HARD
Rich Text Editor
PREMIUMBuild a contenteditable rich-text editor with bold/italic/list formatting and a live toolbar state.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Selectable Cells
PREMIUMBuild a grid where you click and drag across cells to select a rectangular range of them.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Spreadsheet Grid
PREMIUMBuild a grid of cells with formula evaluation and dependent-cell recalculation.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Statechart Engine (XState-lite)
PREMIUMBuild a state-machine engine with events, guards, entry and exit actions, and context updates.
40 minJavaScript - HARD
Tabs III
PREMIUMBuild a fully accessible tabs component with arrow-key navigation per the ARIA authoring guide.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Tetris
PREMIUMBuild Tetris with falling tetrominoes, rotation, line clears, and scoring.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Tic-tac-toe II
PREMIUMBuild a generalized tic-tac-toe game on an N x N board where M consecutive marks wins.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Transfer List II
PREMIUMBuild a transfer list with bulk select, deselect, and the ability to add new items to either side.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue - HARD
Undo / Redo Manager II
PREMIUMBuild a class that tracks draft values and commits them as batch checkpoints for undo and redo navigation.
40 minJavaScript - HARD
Undoable Database II
PREMIUMBuild a user database that buffers draft mutations and commits them as batch undo and redo checkpoints.
40 minJavaScript - HARD
useForm
PREMIUMImplement a form-state hook managing values, touched, errors, validation, and submission.
40 minJavaScript - HARD
useUndoRedo
PREMIUMImplement an undo/redo state hook exposing undo, redo, canUndo, canRedo over past/present/future stacks.
40 minJavaScript - HARD
Wordle
PREMIUMBuild the Wordle word-guessing game with row-by-row guesses and per-letter color feedback.
40 minUI / FrameworksAngularReactHTML / CSS / JSVue