From 2ea3bb393316478511764e2d0d607b0c7908329e Mon Sep 17 00:00:00 2001 From: Hanafe Mira <117443069+self1am@users.noreply.github.com> Date: Tue, 18 Nov 2025 10:36:15 +0530 Subject: [PATCH] Fix: Remove listData from useEffect dependency to prevent infinite re-renders Fixes maximum call stack size exceeded error caused by infinite re-render loop. The issue occurs because: - listData is in the dependency array - When data changes, listData gets updated via setListData - This triggers the effect again, creating an infinite loop Solution: Remove listData from dependencies since we only need to react to data, searchText, and excludeData changes. Tested on React Native 0.80.x with Android API 35. Related issue: #302 --- src/components/Dropdown/index.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index 2a73f2f..53b8353 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -148,14 +148,18 @@ const DropdownComponent = React.forwardRef>( useEffect(() => { if (data && searchText.length === 0) { const filterData = excludeData(data); - setListData([...filterData]); + // only update state when the filtered data actually differs to avoid infinite re-renders + if (!_isEqual(filterData, listData)) { + setListData([...filterData]); + } } if (searchText) { + // call the search handler when there is a search term onSearch(searchText); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [data, searchText]); + // eslint-enable-next-line react-hooks/exhaustive-deps + }, [data, searchText, excludeData, listData]); const eventOpen = () => { if (!disable) { @@ -300,7 +304,7 @@ const DropdownComponent = React.forwardRef>( } } } - }, [autoScroll, data.length, listData, value, valueField]), + }, [autoScroll, data.length, value, valueField]), // to fix Maximum Depth Exceeded warning | removed listData from dependency array 200 );