intermediateForms

The Input That Types Behind You

Decide what you would build from the brief alone. Everything below it is available, but the exercise stops working if you open it first.

The brief you were given

A comment box in a busy page lags visibly while typing: characters appear a moment after the keystroke. The value is held in a state object shared with the surrounding page. Fix it.

The trap — the wrong fix that looks right

Wrapping the surrounding components in a memoization boundary so they stop re-rendering on each keystroke. The typing becomes smooth, the change is small, and the diff looks like a performance fix. What was added is a comparison on every render for every wrapped component and a retained reference for every callback passed into them — costs that are now paid forever, on every interaction, to work around a state value that is simply in the wrong place. The next feature that reads the shared state re-introduces the lag, and the memoization makes it harder to see why.