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

Updating only one property on an object

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

Solid Playground

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

Updating only one property on an object

Similar Threads

Updating only one property on an object

Similar Threads

Similar Threads

Similar Threads