Zero re-renders per keystroke: how the typing test paints

A typing test has one job above all others: when you press a key, the screen has to answer before you notice it was asked. Anything slower and your fingers start waiting for the page, which is the exact habit a typing test should never teach.

The old way: diff the passage on every key#

Each letter on the page is its own element so it can turn white when correct and red when wrong. In the first version, every keystroke updated state, React walked the whole passage to work out which letters changed, and the browser repainted. On a short test that was fine. On a long time-mode run, with hundreds of letters on screen, it was a lot of work just to recolour one character.

Paint only the letter that changed#

Now the passage renders once and stays put. When you type, the engine writes the new status straight onto that single letter (correct, error, or pending) and React never compares the list mid-race. The passage component is memoised, the class names are fixed strings prepared ahead of time, and the per-key path does no extra work.

A caret that glides instead of jumps#

The caret is positioned from the letters' real layout coordinates and moved with a direct style write inside a single animation frame, so it slides between characters rather than blinking from one spot to the next. Line measurements are cached and only recalculated when fonts finish loading or the window resizes. The caret also stays hidden until its first measurement, which removed the brief flicker you could sometimes catch on load.

Live stats in constant time#

Live WPM and accuracy used to recount every correct character on each update. The engine now keeps a running count as you type, so the numbers cost the same whether you are on the first word or the five hundredth.

Room to type fast#

The text area is capped to a three-line window that scrolls itself, and time mode keeps adding words as you go, so fast typists never hit the end of the passage before the clock runs out. Letter entrance animations moved to compositor-only CSS, which keeps them off the main thread entirely.

Your test, in the URL#

The same update made test settings part of the address: /type?mode=words&option=25 opens exactly that test, and a reload keeps it. Send someone a link and they land on the same mode you were practising.