Theo's Typesafe Cult•2y ago

React Native and Zustand Real-time data

Hey everyone, I am writing a react native app that uses mqtt for real time data comms, and needs to be able to update every 100ms if possible. I am using zustand to handle the mqtt data outside of the react tree to help reduce uneccessary renders.

  onMessage: (topic, buffer) => {
    if (!get().mqttData.get(topic)) return;

    if (start == 0) start = new Date().getTime();

    get().mqttBuffData.set(topic, buffer);

    // if its been 500 ms call handle buffers
    if (new Date().getTime() - start > 100) {
      get().handleBuffers();
    }
  },
  handleBuffers: () => {
    start = 0;
    for (let [key, value] of get().mqttBuffData) {
      get().mqttData.set(key, JSON.parse(value.toString()));
    }

    set((state) => ({
      mqttBuffData: new Map(),
    }));
  },

  onMessage: (topic, buffer) => {
    if (!get().mqttData.get(topic)) return;

    if (start == 0) start = new Date().getTime();

    get().mqttBuffData.set(topic, buffer);

    // if its been 500 ms call handle buffers
    if (new Date().getTime() - start > 100) {
      get().handleBuffers();
    }
  },
  handleBuffers: () => {
    start = 0;
    for (let [key, value] of get().mqttBuffData) {
      get().mqttData.set(key, JSON.parse(value.toString()));
    }

    set((state) => ({
      mqttBuffData: new Map(),
    }));
  },

I timed this function using new Date().getTime() before and after, and it it seems to be taking ~600ms to call the function.... which doesnt seem right

1 Reply

WOLFLEADEROP•2y ago

  handleBuffers: () => {
    start = 0;

    for (let [key, value] of get().mqttBuffData) {
      get().mqttData.set(key, JSON.parse(value.toString()));
    }

    get().mqttBuffData.clear();
  },

  handleBuffers: () => {
    start = 0;

    for (let [key, value] of get().mqttBuffData) {
      get().mqttData.set(key, JSON.parse(value.toString()));
    }

    get().mqttBuffData.clear();
  },

using get and clearing seemd to fix it the issue is, if i dont call a set function... then my ui never updates but the zustand set function takes ~600ms 👀

Gaming

Programming

React Native and Zustand Real-time data