A study tracker displays a session counter alongside a subject filter input. The counter accumulates correctly when clicked but loses its value unexpectedly during normal use.
After logging several sessions, typing a single character into the subject filter drops the counter back to zero. Every keystroke causes a full reset.
Consider how React decides whether a child component needs to be replaced entirely or simply brought up to date.
Consider how React decides whether a child component needs to be replaced entirely or simply brought up to date.
Why this fixes it
The key prop signals component identity to React - when a key changes between renders, React treats the element as an entirely new component, unmounts the old instance, and mounts a fresh one from scratch. Using key={\progress-${subject}`}meant the key changed on every keystroke, so ProgressCounter was completely destroyed and recreated after every character typed, wiping itssessionsstate each time. Replacing the compound key with the stable string"progress"givesProgressCounter` a permanent identity so React updates the existing instance in place across all parent re-renders, preserving its internal state correctly.