perf: Optimize AnimatedList rendering with useCallback

[EnderRomantice]

Currently, every time AnimatedList re-renders (e.g., when selectedIndex changes), new inline functions are created for onMouseEnter and onClick for each list item. This causes all AnimatedItem children to re-render unnecessarily, which can impact performance, especially with longer lists.

Solution

Refactored the event handlers to use React’s useCallback hook. This memoizes the functions, ensuring their references remain stable across renders. As a result, only the AnimatedItem that is actually affected will re-render.

Key Changes

Imported useCallback from React.
Wrapped handleItemMouseEnter, handleItemClick, and handleScroll in useCallback.
Updated the items.map() loop to call these memoized handlers.
Verification

This is a pure performance optimization. All existing functionality (mouse hover, click, keyboard navigation, scroll gradients) should work exactly as before with no breaking changes.

[DavidHDev]

cool!