Handle Real time Data of a listing api with pagination with pusher?

i have a job listing api which will give me status of each job that its dispatched or not if its succesfully dispatched it will show status of sent and default will be pending so i will have a notification dropdown with load more feature or pagination so whenever a job is dispatched i want to refresh the list :

    channel.bind('App\\Events\\EmailStatusUpdated', function (data) { 
    // Call the API to refresh the list when a job's status is updated 
      refreshList(); call the refresh list api and set jobs 
    }); 
    
    const refreshList = async () => { 
      const response = await fetch('/api/email-notifications?page=1'); 
      const jobs = await response.json(); 
      setJobs(jobs.data); 
    };

this works but there will be still loading right as this is not processed in real time

we can tackle this with this code :

    channel.bind('App\\Events\\EmailStatusUpdated', function (data) { 
        setJobs((prevJobs) => { 
             return [data, ...prevJobs]; 
        }); 
    });

this will just pop the new job data in the existing array which will showcase the data in real time but this will fail when we will have thousands of jobs all the jobs array will be held in the memory which will lead to memory leaks and the UI will lag . i didn't found any proper solution on the internet

so how do i tackle this kind of scenario that i show the actual real time data instead of popping the new data in the existing array ?

do let me know if you guys get confused so i can provide more context

i tried googling and everyone says the same thing to pop the new data in the existing array or just refresh the list when new data comes but this will fail when there are several jobs dispatching at the same time like in thousands . this is not scalable approach