Avoiding rerenders using `setState + reconcile`

Hi,

Currently I have a webworker producing data slices which I want to render.

It looks a bit like this:

// limit frontend updates to max 100 per second or min 1 per second
const timer;
const lastUpdate = Date.now();
worker.onmessage = ({data}) => {
  clearTimeout(timer);
  const now = Date.now();
  const update = () => {
    lastUpdate = now;
    setState('events', reconcile(data.evts));
  };
  if (now > lastUpdate + 1000) {
    update();
  } else {
    setTimeout(update, 10);
  }
};

// limit frontend updates to max 100 per second or min 1 per second
const timer;
const lastUpdate = Date.now();
worker.onmessage = ({data}) => {
  clearTimeout(timer);
  const now = Date.now();
  const update = () => {
    lastUpdate = now;
    setState('events', reconcile(data.evts));
  };
  if (now > lastUpdate + 1000) {
    update();
  } else {
    setTimeout(update, 10);
  }
};

The problem is, when I have a

<For each={state.events}>

<For each={state.events}>

somewhere, the whole loop keeps rerendering, even if only a few elements have been prepended (they always get prepended).

I thought of trying to specify the key in reconcile (the data itself doesn't change, just position in the array) but it is 2 levels deep. The events array is of type:

type EventDataFoo = {timestamp: Date, some_other_data: any};
type EventDataBar = {timestamp: Date, some_data: any};
type Events = ({kind: 'foo', data: EventDataFoo} | {kind: 'bar', data: EventDataBar})[]

type EventDataFoo = {timestamp: Date, some_other_data: any};
type EventDataBar = {timestamp: Date, some_data: any};
type Events = ({kind: 'foo', data: EventDataFoo} | {kind: 'bar', data: EventDataBar})[]

the key would be

data.timestamp

data.timestamp

which is guaranteed to be unique, even over different data kinds.
reconcile expects the key to be a string tho which I can only provide for 1 level.

Am I misunderstanding something completely or is this really hard to achieve?

SolidJS•3y ago•

20 replies

belst

Avoiding rerenders using `setState + reconcile`

Hi,

Currently I have a webworker producing data slices which I want to render.

It looks a bit like this:

// limit frontend updates to max 100 per second or min 1 per second
const timer;
const lastUpdate = Date.now();
worker.onmessage = ({data}) => {
  clearTimeout(timer);
  const now = Date.now();
  const update = () => {
    lastUpdate = now;
    setState('events', reconcile(data.evts));
  };
  if (now > lastUpdate + 1000) {
    update();
  } else {
    setTimeout(update, 10);
  }
};

// limit frontend updates to max 100 per second or min 1 per second
const timer;
const lastUpdate = Date.now();
worker.onmessage = ({data}) => {
  clearTimeout(timer);
  const now = Date.now();
  const update = () => {
    lastUpdate = now;
    setState('events', reconcile(data.evts));
  };
  if (now > lastUpdate + 1000) {
    update();
  } else {
    setTimeout(update, 10);
  }
};

The problem is, when I have a

<For each={state.events}>

<For each={state.events}>

type EventDataFoo = {timestamp: Date, some_other_data: any};
type EventDataBar = {timestamp: Date, some_data: any};
type Events = ({kind: 'foo', data: EventDataFoo} | {kind: 'bar', data: EventDataBar})[]

type EventDataFoo = {timestamp: Date, some_other_data: any};
type EventDataBar = {timestamp: Date, some_data: any};
type Events = ({kind: 'foo', data: EventDataFoo} | {kind: 'bar', data: EventDataBar})[]

the key would be

data.timestamp

data.timestamp

Avoiding rerenders using `setState + reconcile`

Similar Threads

Avoiding rerenders using `setState + reconcile`

Similar Threads

Similar Threads

Similar Threads