I need to request an endpoint every 1 sec and with that response (around 30 array) update React context state and the ui. It's working but at some point it got so slow and chrome start behaving weird. What is the best way to solve this? with some library like lodash?

Hook/context state:

const [stateData, setStateData] = useState(null);

The following method is the one that triggers every X sec, where X can be [1,10,15,20] seconds

  const subscribeOb = async (): Promise<void> => {
    await m?.subscribe((event) => {
     getData()
   });
  };

This method is the one that its called once the subscription triggered

  const getData = async (): Promise<void> => {
  try {
   const { a, b } = await generalObj?.data();
   const currentA = (stateData?.asks as Data[]) || [];
   const currentB = (stateData?.bids as Data[]) || [];
   const newObj = {
     asks: [...a, ...currentA],
     bids: [...b, ...currentB],
   };
   setStateData(newObj); // this is from the hook in the context
  } catch (e) {
  console.log("Error found while getting Data", e);
  }
};