A compose box shows a character count as the user types a draft message, alongside a notification badges panel listing alert categories that never change. Typing in the draft field should have no effect on the badges panel.
Type a single character into the compose box - the badges panel's render count climbs even though the categories displayed never change.
categories looks like the same three values on every render - but does JavaScript agree that it's the same array?
categories looks like the same three values on every render - but does JavaScript agree that it's the same array?
Why this fixes it
`["mentions", "replies", "likes"]` is written directly inline in the JSX passed to `NotificationBadges`, which means a brand new array is constructed at a new memory address every time `ComposeBox` renders, even though its contents never change. `React.memo`'s prop comparison uses reference equality, and two arrays with identical contents are never `===` to each other, so the comparison fails on every keystroke and `NotificationBadges` re-renders regardless of the memo wrapper. Moving the array to a module-level constant gives it a single permanent reference that exists once, outside the component function, so every render passes the exact same array reference and the memo comparison correctly finds no change.