Motivation

Components defined inside render functions cause React to see a new component type on every render, destroying and recreating the entire subtree's DOM nodes and state.

This was causing:

• Lint warnings in CI (check_lint job)
• Unnecessary reconciliation overhead that violates React best practices
• Could cause issues if these components later add state, effects, or animations

This refactor maintains identical user-facing behavior while fixing the underlying performance and code quality issues.

Description:

• Extracted [Pointer] component outside [Tooltip] render function with proper TypeScript interface (PointerProps)
• Extracted [HighlightedButton] component outside [Tooltip] render function with defined prop types (HighlightedButtonProps)
• Fixed lint warnings: "Do not define components during render" (react/no-unstable-nested-components)
• Components now receive explicit props instead of relying on closure scope
• Resolves performance issue where React recreates component types on every render, causing unnecessary reconciliation and DOM remounts

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• Jest Unit Test - All 7 existing Tooltip tests pass
• Checked with example app
• Lint validation - yarn lint passes with no warnings

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes

Additional context