fix prevent AutoScroll hook name collision with unique ID

[ruhz3]

Summary
This PR adds a unique identifier (unique_id) as a suffix to dynamically generated hook function names, preventing naming collisions when multiple instances of the component are mounted.

Changes

• Introduced unique_id suffix to:
  • checkIfNearBottom_<unique_id>
  • scrollToBottomIfNeeded_<unique_id>
  • corresponding useEffect cleanup handlers
• Ensures scroll behavior remains scoped to each component instance
• Avoids potential conflicts from duplicated hook names

Context
Hook function names were previously shared across instances, which could lead to incorrect behavior or conflicts in shared DOM references. This update scopes those functions using a component-specific unique_id.

Notes
This version keeps the original structure and logic, and only appends unique_id to ensure safe multi-instance usage. No refactoring or naming convention changes were introduced beyond that.

closes #5648

[greptile-apps]

Greptile Summary

This PR addresses JavaScript naming conflicts in the AutoScroll component by adding unique identifiers to dynamically generated function names. The core issue was that when multiple AutoScroll components were rendered in the same JavaScript scope (particularly when using patterns like rx.foreach with rx.cond), they would generate identical function names like checkIfNearBottom and scrollToBottomIfNeeded, causing "Identifier has already been declared" errors.

The solution leverages the component's existing ref_name (obtained via get_ref()) as a unique suffix for these JavaScript functions. Since ref_name is already guaranteed to be unique per component instance through the get_unique_variable_name() method in the component's create() method, this approach ensures each AutoScroll instance has its own scoped function names without requiring changes to the underlying uniqueness generation logic.

The change modifies the get_hooks() method in reflex/components/core/auto_scroll.py to append the unique identifier to:

• checkIfNearBottom_{unique_id}() - the function that checks scroll position
• scrollToBottomIfNeeded_{unique_id}() - the function that handles scrolling behavior
• All corresponding event listener registrations and cleanup handlers in the useEffect hook

This fix integrates seamlessly with Reflex's existing component system, which already handles component uniqueness through ref names, and maintains the original scroll behavior logic while preventing JavaScript scope conflicts.

Confidence score: 5/5

• This is a safe, targeted fix that resolves a specific JavaScript naming conflict issue without affecting core functionality
• The solution uses existing, proven uniqueness mechanisms (ref_name) and only adds suffixes to function names
• The change is minimal and self-contained, preserving all original logic while fixing the scope collision problem
• No files need additional attention as the fix is straightforward and well-scoped

_{1 file reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

[codspeed-hq]

CodSpeed Performance Report

Merging #5650 will not alter performance

_{Comparing ruhz3:fix/auto-scroll-name-conflicts (336d340) with main (687d20f)}

Summary

✅ 8 untouched benchmarks