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.