SolidJSS
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);
  }
};


The problem is, when I have a 
<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})[]


the key would be 
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?
Was this page helpful?