Reactivity with normal functions

I try the following:

doubleCount

doubleCount

is using

createMemo

createMemo

while

tripleCount

tripleCount

is a normal anonymous function.

They work just fine, the value is updated accordingly. The tripleCount is like an accessor at this point.

- How can this work? Do signals simply re-trigger any functions that wrap it?
- What are the benefits of using createMemo over normal function like this?

https://playground.solidjs.com/anonymous/4da086d5-a747-42b1-a50d-7cf8241cde74

function Counter() {
  const [count, setCount] = createSignal(1);
  const doubleCount = createMemo(() => count() * 2)
  const tripleCount = () => count() * 3

  return (
    <>
    <button type="button" onClick={() => setCount(count() + 1)}>
     {count()}
    </button>
    <br/>
    x2: {doubleCount()}
    <br/>
    x3: {tripleCount()}
    </>
  );
}

function Counter() {
  const [count, setCount] = createSignal(1);
  const doubleCount = createMemo(() => count() * 2)
  const tripleCount = () => count() * 3

  return (
    <>
    <button type="button" onClick={() => setCount(count() + 1)}>
     {count()}
    </button>
    <br/>
    x2: {doubleCount()}
    <br/>
    x3: {tripleCount()}
    </>
  );
}

Solid Playground

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

SolidJS•3y ago•

4 replies

anhvu0911

Reactivity with normal functions

I try the following:

doubleCount

doubleCount

is using

createMemo

createMemo

while

tripleCount

tripleCount

function Counter() {
  const [count, setCount] = createSignal(1);
  const doubleCount = createMemo(() => count() * 2)
  const tripleCount = () => count() * 3

  return (
    <>
    <button type="button" onClick={() => setCount(count() + 1)}>
     {count()}
    </button>
    <br/>
    x2: {doubleCount()}
    <br/>
    x3: {tripleCount()}
    </>
  );
}

function Counter() {
  const [count, setCount] = createSignal(1);
  const doubleCount = createMemo(() => count() * 2)
  const tripleCount = () => count() * 3

  return (
    <>
    <button type="button" onClick={() => setCount(count() + 1)}>
     {count()}
    </button>
    <br/>
    x2: {doubleCount()}
    <br/>
    x3: {tripleCount()}
    </>
  );
}

Solid Playground

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

Reactivity with normal functions

Similar Threads

Reactivity with normal functions

Similar Threads

Similar Threads

Similar Threads