Estoy tratando de usar un componente de la barra de búsqueda para filtrar dinámicamente el contenido de una tabla que se completa con solicitudes de API; sin embargo, cuando uso esta implementación, el componente se vuelve a procesar infinitamente y envía repetidamente las mismas solicitudes de API. El gancho useEffect():
React.useEffect(() => { const filteredRows = rows.filter((row) => { return row.name.toLowerCase().includes(search.toLowerCase()); }); if (filteredRows !== rows){ setRows(filteredRows); } }, [rows, search]);¿Hay algo que me haya perdido en esta implementación que haría que esto se volviera a renderizar infinitamente?
Edición 1: para obtener más contexto, agregue segmentos relevantes de código de esa referencia a este componente que podría causar el mismo comportamiento.
Función dentro del componente principal que representa la tabla que llama a mi API a través de una biblioteca webHelpers que escribí para facilitar el uso de solicitudes de API.
function fetchUsers() { webHelpers.get('/api/workers', environment, "api", token, (data: any) => { if (data == undefined || data == null || data.status != undefined) { console.log('bad fetch call'); } else { setLoaded(true); setUsers(data); console.log(users); } }); } fetchUsers();Edición 2: los pasos tomados hasta ahora para intentar solucionar este problema, editaron el gancho de acuerdo con los comentarios:
React.useEffect(() => { setRows((oldRows) => oldRows.filter((row) => { return row.name.toLowerCase().includes(search.toLowerCase()); })); }, [search]);Edición 3: Solución encontrada, marqué la respuesta por @Dharmik señalando cómo se administran las llamadas de Efecto, ya que esto me llevó a investigar los componentes principales y descubrir qué estaba causando que el componente se volviera a procesar repetidamente. Resultó que había un enlace useEffect que se ejecutaba repetidamente por un elemento principal que volvía a renderizar la página y provocaba un bucle de renderizaciones y llamadas a la API. Mi solución fue eliminar este gancho y los subcomponentes continuaron renderizándose como deberían sin bucles.
Está sucediendo porque ha agregado rows para useEffect la matriz de dependencia de Efecto y cuando alguien ingresa algo en search bar , las rows se filtran y las rows se actualizan constantemente.
Y debido a eso, se llama a useEffect una y otra vez. Elimine rows de la matriz de dependencia useEffect y debería funcionar bien.
Me gustaría complementar la respuesta de Dharmik. Las dependencias deben ser exhaustivas (recomendación del equipo de React). Creo que un error es que filteredRows !== rows usa la igualdad de referencia. Pero rows.filter(...) devuelve una nueva referencia. Entonces, puede usar algún tipo de verificación de igualdad profunda o, en mi opinión, mejor algo como:
React.useEffect(() => { setRows((oldRows) => oldRows.filter((row) => { return row.name.toLowerCase().includes(search.toLowerCase()); })); }, [search]);