SolidJS•2y ago

Updating only one property on an object

Hi, as I understand if one property of an object that is a signal updates, then all other properties will also rerun. It that correct? If yea is it because the object itself is dependent on its own properties so if one change the rest do. I have this as a simple example with style

function Main() {
  const [counter, setCounter] = createSignal(0);

  const getColor = () => {
    console.log("getting color");
    return "blue";
  };

  const getWidth = () => {
    return `${counter() * 40}px`;
  };

  return (
    <>
      <button
        onClick={() => setCounter((x) => x + 1)}
        style={{
          background: getColor(),
          width: getWidth(),
        }}
      >
        add
      </button>
    </>
  );
}

function Main() {
  const [counter, setCounter] = createSignal(0);

  const getColor = () => {
    console.log("getting color");
    return "blue";
  };

  const getWidth = () => {
    return `${counter() * 40}px`;
  };

  return (
    <>
      <button
        onClick={() => setCounter((x) => x + 1)}
        style={{
          background: getColor(),
          width: getWidth(),
        }}
      >
        add
      </button>
    </>
  );
}

Here any time width will change, color also runs. In some cases it may be an expensive calculation. Is there a recommended to only have the property we that changes to run? I can think of making store instead and passing its values or just using createMemo on any property where it makes sense and then let it rerun? Any advice would be great thanks Here's a link for that example https://playground.solidjs.com/anonymous/03e44b2b-0575-49c0-85a9-8eac7963f727

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

10 Replies

mdynnl•2y ago

a signal is an entity that checks for referential equality by default (but you can supply custom one) and the whole entity changes when the equal check yields false for nested (fine-grained reactivity), you can use stores which are implemented using proxy + signals they are an advanced form of objects with getters bound to signals

{
  get a() { return sigA() },
  get b() { return sigB() },
}

{
  get a() { return sigA() },
  get b() { return sigB() },
}

MaxOP•2y ago

Thanks, that's useful. I think one thing I don't get is whether in this case style is being automatically treated as a derived signal or something? If I were to make a derived signal called style I can see it updating each time makes sense. In the context of solid I don't see what style object is, it's not a plain object I guess, jsx must be doing something with it

mdynnl•2y ago

yes you got it right, almost every dynamic expressions in jsx is transformed to be wrapped in an effect by solid compiler the exception to almost part is event handlers and refs, directive calls which are just syntatic sugar for refs

MaxOP•2y ago

nice, that's great, thanks

mdynnl•2y ago

don't shy away from looking at compiled output, it helps a ton for learning solid's compiler tbh i'm just paraphrasing the compiled output

MaxOP•2y ago

hahah yea I should, never looked. You know if there is way with solid start to see it preferably not all minified

mdynnl•2y ago

absolutely, solid start already sets up vite plugin inspect you probably weren't aware of it, the dev command spits out a link to it

MaxOP•2y ago

that awesome gonna be so useful

mdynnl•2y ago

there are toggles for ssr, diff, before and after each transform, node_modules (very useful for looking at solid-start builtins) all provided by vite and inspect plugin

MaxOP•2y ago

nice, I'll take a look with inspect, thanks 🔥

Gaming

Programming

Updating only one property on an object