solid-js/store: which one is faster? batch or produce? how produce can set at once?

[Grabber]

which one is faster? batch or produce?

import { createStore, produce } from 'solid-js/store';

Case 1

const [o, setO] = createStore({x: 1, y: 1, z: 1, t: [1, 2, 3]});

batch(() => {
  setO('x', 11);
  setO('y', 11);
  setO('z', 11);
  setO('t', [11, 22, 33]);
});

setO(produce((o) => {
  o.x = o.y = o.z = 11;
  o.t = [11, 22, 33];
}));

Case 2

const [o, setO] = createStore({x: 1, y: 1, z: 1, t: [1, 2, 3]});

batch(() => {
  setO(['x', 'y', 'z'], 11);
  setO('t', [11, 22, 33]);
});

setO(produce(o) => {
  o.x = o.y = o.z = 11;
  o.t = [11, 22, 33];
}));

Case 3

batch(() => {
  setO(['x', 'y', 'z'],
    produce((xyz) => {
      xyz = 11;
    })
  );

  setO('t',
    produce((t) => {
      t = [11, 22, 33];
    })
  );
});

[agammann]

batch controls when downstream computations run; produce gives you mutation-style syntax for updating a store. They address different parts of the update.

A store setter already batches its internal updates, so this single call updates all four properties before dependent effects run:

setO(produce(o => {
  o.x = o.y = o.z = 11;
  o.t = [11, 22, 33];
}));

Your explicit batch in cases 1 and 2 groups multiple setO calls. I checked both versions and the single produce call with Solid 1.9.17: an effect reading all four properties reran once after each complete update. That doesn't establish a universal timing winner; choose the syntax that makes your actual update easiest to read. See automatic batching and produce.

Case 3 has a correctness problem: xyz = 11 and t = [...] only reassign local parameters. They don't mutate the store. Use your case 2 path setters to replace those values, or mutate the array passed to produce:

setO('t', produce(t => {
  t.splice(0, t.length, 11, 22, 33);
}));

Also, the case 2 produce example needs the arrow function inside its parentheses, as in the first snippet above.