chore(@clayui/autocomplete): LPD-55597 Improve referential stability

Author: limaagabriel

packages/clay-autocomplete/src/useInfiniteScrolling.tsx

@@ -7,8 +7,13 @@ import {AnnouncerAPI} from '@clayui/core';
 import {CollectionState} from '@clayui/core/src/collection/types';
 import LoadingIndicator from '@clayui/loading-indicator';
 import {sub, useDebounce} from '@clayui/shared';
-import classNames from 'classnames';
-import React, {RefObject, useEffect, useRef, useState} from 'react';
+import React, {
+	RefObject,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
 
 import {AutocompleteMessages} from './Autocomplete';
 
@@ -74,13 +79,13 @@ export function useInfiniteScrolling({
 	const debouncedIsLoadingMore = useDebounce(isLoadingMore, 200);
 	const isInfiniteScrollingEnabled = Boolean(externalOnLoadMore);
 
-	const onLoadMore = async () => {
+	const onLoadMore = useCallback(async () => {
 		setIsLoadingMore(Boolean(externalOnLoadMore));
 
 		await externalOnLoadMore?.();
 
 		setIsLoadingMore(false);
-	};
+	}, [externalOnLoadMore]);
 
 	const isLoading = Boolean(loadingState !== undefined && loadingState < 4);
 
@@ -151,49 +156,54 @@ export function useInfiniteScrolling({
 		if (active && triggerRef.current && menuRef.current) {
 			let timeoutId: NodeJS.Timeout | null = null;
 
-			const handleIntersect: IntersectionObserverCallback = (entries) => {
-				if (timeoutId) {
-					clearTimeout(timeoutId);
-				}
-
-				timeoutId = setTimeout(() => {
-					const isIntersecting = entries[0]?.isIntersecting ?? false;
-					const countHasChanged =
-						currentCount !== lastTriggerCount.current;
-
-					if (!isLoading && isIntersecting && countHasChanged) {
-						isTriggerActive.current = true;
-						lastTriggerCount.current = currentCount;
-
-						onLoadMore().finally(() => {
-							isTriggerActive.current = false;
-						});
+			const observer = new IntersectionObserver(
+				(entries) => {
+					if (timeoutId) {
+						clearTimeout(timeoutId);
 					}
-				}, 200);
-			};
 
-			const observer = new IntersectionObserver(handleIntersect, {
-				root: menuRef.current,
-				threshold: 1.0,
-			});
+					timeoutId = setTimeout(() => {
+						const isIntersecting =
+							entries[0]?.isIntersecting ?? false;
+						const countHasChanged =
+							currentCount !== lastTriggerCount.current;
+
+						if (!isLoading && isIntersecting && countHasChanged) {
+							isTriggerActive.current = true;
+							lastTriggerCount.current = currentCount;
+
+							onLoadMore().finally(() => {
+								isTriggerActive.current = false;
+							});
+						}
+					}, 200);
+				},
+				{
+					root: menuRef.current,
+					threshold: 1.0,
+				}
+			);
 
 			observer.observe(triggerRef.current);
 
-			return () => observer.disconnect();
+			return () => {
+				if (timeoutId) {
+					clearTimeout(timeoutId);
+				}
+
+				observer.disconnect();
+			};
 		}
 	}, [active, isLoading, onLoadMore]);
 
-	const InfiniteScrollingTrigger = () => (
-		<div
-			aria-hidden="true"
-			className={classNames({'mt-2': isInfiniteScrollingEnabled})}
-			ref={triggerRef}
-		>
-			{(isLoadingMore || debouncedIsLoadingMore) && (
-				<LoadingIndicator className="mb-2" size="sm" />
-			)}
-		</div>
-	);
+	const InfiniteScrollingTrigger = () =>
+		isInfiniteScrollingEnabled ? (
+			<div aria-hidden="true" className="mt-2" ref={triggerRef}>
+				{(isLoadingMore || debouncedIsLoadingMore) && (
+					<LoadingIndicator className="mb-2" size="sm" />
+				)}
+			</div>
+		) : null;
 
 	const lastItem = currentCount > 0 ? collection.getLastItem() : null;
 	const isLastItemActive =
@@ -203,7 +213,7 @@ export function useInfiniteScrolling({
 		if (isLastItemActive && !isLoading) {
 			onLoadMore();
 		}
-	}, [isLastItemActive, isLoading]);
+	}, [isLastItemActive, isLoading, onLoadMore]);
 
 	return InfiniteScrollingTrigger;
 }