Duplicate “Follow” Button Text in User Profile Hover Card

Source: Dev.to

Description

While navigating the Dev.to feed, the Follow button in the user profile hover card displays duplicated text (e.g., FollowFollow). This appears to be a frontend rendering issue, likely caused by double‑rendering the button label or an unexpected state duplication.

Steps to Reproduce

1. Log in to Dev.to.
2. Navigate to the main feed.
3. Hover over any user’s avatar or username (e.g., from a post card).
4. Observe the profile preview tooltip.

Expected Behavior

The profile preview tooltip should display a single, properly styled Follow button with one label, matching other follow interactions across the site.

Actual Behavior

The Follow button inside the tooltip shows duplicated text (FollowFollow). This creates a visually inconsistent and potentially confusing user experience.

Environment (Desktop)

• OS: Windows 10
• Browser: Chrome 144.0.0.0 (64‑bit)
• Browser extensions: Disabled

Note: The issue occurs in dark mode; light mode has not yet been tested.

Possible Causes

• Double‑rendering of the button label.
• Incorrect conditional UI state handling in React/JSX.
• Tooltip component instantiating multiple copies of the Follow button instead of reusing a single component.

Suggested Fix

1. Inspect the component responsible for rendering the Follow button in the tooltip.
2. Ensure the label is not rendered twice due to conditional logic or state duplication.
3. Verify that hover‑triggered tooltips reuse the same Follow button component rather than creating multiple instances.
4. Test across both light and dark modes for consistent rendering.

Severity

Low to Medium – primarily a visual/UX inconsistency, but it may confuse users. The bug does not prevent following/unfollowing functionality.