Chinese Typing Speed Test

Building a Traditional Chinese typing test in React exposes a classic browser DOM subtlety: React’s synthetic onChange event is wired to the native input event, which fires on every intermediate phonetic keystroke (Zhuyin / Bopomofo or Pinyin) while the user is still composing a character. If a typing judge scores uncommitted phonetic symbols inside onChange, every intermediate keystroke is wrongly penalized as a typo.

Even more subtly, in the author’s July 2026 record with macOS Zhuyin, the final native input event emitted during composition still carries isComposing: true, and no subsequent input event fires after compositionend. Therefore, guarding onChange with if (event.nativeEvent.isComposing) return is not enough—it drops the final committed character! This tool tracks composition state via a dedicated ref across onCompositionStart and onCompositionEnd, settling the committed string both when non-composing input arrives and when compositionend fires, while deduplicating passage transitions via settledValueRef.

For the Daily Challenge mode, players on the same local date receive the same passage sequence without a central passage database. The client hashes the local date string (kof-daily-YYYY-MM-DD) into a 32-bit integer seed and drives a deterministic Mulberry32 PRNG Fisher-Yates shuffle, while the countdown timer computes elapsed wall-clock time from Date.now() so background-tab throttling cannot freeze the 60-second clock.