What React skills does "Build Undo/Redo" practice?

This challenge practices: useReducer, state machines, immutable updates, keyboard shortcuts. It is rated hard difficulty and takes approximately 35 minutes.

What are the hints for "Build Undo/Redo"?

Model state as { past: State[], present: State, future: State[] } Undo: move present to future[0], pop past[-1] to present Redo: move present to past[-1], pop future[0] to present. New actions clear future.

hard35 min

Build Undo/Redo

Build a drawing canvas (or text editor) with undo/redo functionality. Maintain a history stack of past states and a future stack for redo. Each action pushes to the history, undo pops from history to future, and redo pops from future back to history. This is a classic application of the Command pattern in UI.

Skills

useReducerstate machinesimmutable updateskeyboard shortcuts

Tests

Canvas starts empty with disabled undo/redo
Clicking the canvas adds a circle
Undo removes the last circle
Redo restores an undone circle
New action clears the redo stack

Your Code

Loading editor...