4 replies

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

TTC

Theo's Typesafe Cult•3y ago•

4 replies

WOLFLEADER

React Native and Zustand Real-time data

  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

React Native and Zustand Real-time data

Similar Threads

React Native and Zustand Real-time data

Similar Threads

Similar Threads

Similar Threads