SolidJS•2y ago

Reactivity with normal functions

I try the following: doubleCount is using createMemo while 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

4 Replies

Carlo Nyte•2y ago

This is what I found in the docs:

In Solid, you often don't need to wrap functions in memos; you can alternatively just define and call a regular function to get similar reactive behavior. The main difference is when you call the function in multiple reactive settings. In this case, when the function's dependencies update, the function will get called multiple times unless it is wrapped in createMemo.

So for the example you are doing you won't see an advantage or difference between using createMemo and not using it. When it will be useful is if you have several pages where you are doing either multiple or a complex computation to count() and you don't have to have the data in count() to be refetched every time. createMemo is simply a way to cache the data from the signal for late/ on going use. https://www.solidjs.com/docs/latest/api#creatememo

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

Levi B.•2y ago

You can check out how solid reactivity works here in the docs https://www.solidjs.com/guides/reactivity#how-it-works.

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

Levi B.•2y ago

You can also read @ryansolid 's article on building a reactive system, it will help you understand how signals works. https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p

DEV Community

Building a Reactive Library from Scratch

In the previous article A Hands-on Introduction to Fine-Grained Reactivity I explain the concepts...

anhvu0911OP•2y ago

Finally, I get createMemo vs normal function From the article, section 4 - use less computations https://dev.to/ryansolid/thinking-granular-how-is-solidjs-so-performant-4g37#4-use-less-computations For simple calculation, use createMemo() will always be called when it is first declared. Declare with a normal function is just a declaration, it will not be triggered until it is used. For costly calculation, a normal function would be called every time it is used, while createMemo() caches the result, so if the signal E.g. https://playground.solidjs.com/anonymous/423f5796-c163-4545-9a8b-b1feac43e972 assume double() is a costly operation. In JSX, we use the value twice, but only one console.log for createMemo is printed

Solid Playground

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

DEV Community

Thinking Granular: How is SolidJS so Performant?

Recently I've been asked many times how SolidJS is so much faster than all their favourite libraries....

Gaming

Programming

Reactivity with normal functions