diff --git a/ui/src/components/HarEntriesList.tsx b/ui/src/components/HarEntriesList.tsx
index 6ca53cb45..5cb894c13 100644
--- a/ui/src/components/HarEntriesList.tsx
+++ b/ui/src/components/HarEntriesList.tsx
@@ -1,5 +1,5 @@
 import {HarEntry} from "./HarEntry";
-import React, {useEffect, useMemo, useState} from "react";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
 import styles from './style/HarEntriesList.module.sass';
 import spinner from './assets/spinner.svg';
 import ScrollableFeed from "react-scrollable-feed";
@@ -30,32 +30,19 @@ export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntri
     const [loadMoreTop, setLoadMoreTop] = useState(false);
     const [isLoadingTop, setIsLoadingTop] = useState(false);
 
-    useEffect(() => {
-        if(loadMoreTop && !connectionOpen && !noMoreDataTop)
-            fetchData(FetchOperator.LT);
-    }, [loadMoreTop, connectionOpen, noMoreDataTop]);
-
-    useEffect(() => {
-        const list = document.getElementById('list').firstElementChild;
-        list.addEventListener('scroll', (e) => {
-            const el: any = e.target;
-            if(el.scrollTop === 0) {
-                setLoadMoreTop(true);
-            } else {
-                setLoadMoreTop(false);
-            }
-        });
-    }, []);
-
-    const filterEntries = (entry) => {
+    const filterEntries = useCallback((entry) => {
         if(methodsFilter.length > 0 && !methodsFilter.includes(entry.method.toLowerCase())) return;
         if(pathFilter && entry.path.toLowerCase().indexOf(pathFilter) === -1) return;
         if(statusFilter.includes(StatusType.SUCCESS) && entry.statusCode >= 400) return;
         if(statusFilter.includes(StatusType.ERROR) && entry.statusCode < 400) return;
         return entry;
-    }
+    },[methodsFilter, pathFilter, statusFilter]);
 
-    const fetchData = async (operator, firstEntryTimestamp?, lastEntryTimestamp?) => {
+    const filteredEntries = useMemo(() => {
+        return entries.filter(filterEntries);
+    },[entries, filterEntries])
+
+    const fetchData = useCallback(async (operator, firstEntryTimestamp?, lastEntryTimestamp?) => {
 
         const timestamp = operator === FetchOperator.LT ? (firstEntryTimestamp ?? entries[0].timestamp) : (lastEntryTimestamp ?? entries[entries.length - 1].timestamp);
         if(operator === FetchOperator.LT)
@@ -70,50 +57,61 @@ export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntri
                         setNoMoreDataTop(true);
                         scrollTo = document.getElementById("noMoreDataTop");
                     } else {
+                        scrollTo = document.getElementById(filteredEntries?.[0]?.id);
+                        const newEntries = [...data, ...entries];
+                        if(newEntries.length >= 1000) {
+                            newEntries.splice(1000);
+                        }
+                        setEntries(newEntries);
                         if(data.filter(filterEntries).length === 0) {
                             fetchData(operator, data[0].timestamp);
                             return;
                         }
-                        scrollTo = document.getElementById(filteredEntries?.[0]?.id);
                     }
-                    const newEntries = [...data, ...entries];
-                    if(newEntries.length >= 1000) {
-                        newEntries.splice(1000);
-                    }
-                    setEntries(newEntries);
                     setLoadMoreTop(false);
                     setIsLoadingTop(false)
                     if(scrollTo) {
                         scrollTo.scrollIntoView();
                     }
-                }
-
-                if(operator === FetchOperator.GT) {
+                } else if(operator === FetchOperator.GT) {
                     if(data.length === 0) {
                         setNoMoreDataBottom(true);
                     } else {
+                        scrollTo = document.getElementById(filteredEntries?.[filteredEntries.length -1]?.id);
+                        let newEntries = [...entries, ...data];
+                        if(newEntries.length >= 1000) {
+                            setNoMoreDataTop(false);
+                            newEntries = newEntries.slice(-1000);
+                        }
+                        setEntries(newEntries);
                         if(data.filter(filterEntries).length === 0) {
                             fetchData(operator, null, data[data.length-1].timestamp);
                             return;
                         }
                     }
-                    scrollTo = document.getElementById(filteredEntries?.[filteredEntries.length -1].id);
-                    let newEntries = [...entries, ...data];
-                    if(newEntries.length >= 1000) {
-                        setNoMoreDataTop(false);
-                        newEntries = newEntries.slice(-1000);
-                    }
-                    setEntries(newEntries);
                     if(scrollTo) {
                         scrollTo.scrollIntoView({behavior: "smooth"});
                     }
                 }
             });
-    };
+    },[entries, filterEntries, filteredEntries, setEntries, setNoMoreDataBottom, setNoMoreDataTop]);
 
-    const filteredEntries = useMemo(() => {
-        return entries.filter(filterEntries);
-    },[entries, methodsFilter, pathFilter, statusFilter])
+    useEffect(() => {
+        if(loadMoreTop && !connectionOpen && !noMoreDataTop)
+            fetchData(FetchOperator.LT);
+    }, [loadMoreTop, connectionOpen, noMoreDataTop, fetchData]);
+
+    useEffect(() => {
+        const list = document.getElementById('list').firstElementChild;
+        list.addEventListener('scroll', (e) => {
+            const el: any = e.target;
+            if(el.scrollTop === 0) {
+                setLoadMoreTop(true);
+            } else {
+                setLoadMoreTop(false);
+            }
+        });
+    }, []);
 
     return <>
             <div className={styles.list}>