Reactivity with SolidJS

Implementing createMemo & untrack

Ryan Carniato

Ryan Carniato

SolidJS Creator
Reactivity with SolidJS

Check out a free preview of the full Reactivity with SolidJS course

The "Implementing createMemo & untrack" Lesson is part of the full, Reactivity with SolidJS course featured in this preview video. Here's what you'd learn in this lesson:

Ryan implements the the createMemo method which creates a signal and an effect for that signal. The untrack function's implementation is also demonstrated in this lesson.

Preview
Close

Transcript from the "Implementing createMemo & untrack" Lesson

[00:00:00]
>> We are actually missing one more thing. For our purposes, we're gonna do a very simple version of it. But we're gonna createMemo and createMemo as I mentioned is our derivation. And in an actual reactive system where we do these topological sorts, it'd be much more complicated. But for you just kinda coming in and kinda getting a grasp of it.

[00:00:28]
The easiest way to create a memo conceptually, Is just creating a signal. And creating an effect. [LAUGH] Now as I mentioned, this is not perfectly what it is. And actually we have to return the signal too obviously. But this will actually effectively do what we want from what we saw with our examples previously.

[00:01:15]
We could I don't know, take create, we can go, let's call this sum = createMemo. And we can say count () + count2 (). And now, can I get rid of this for a moment? All right, and import it from our file and now, we now we're looking at the sum, and actually, let's just do count, count2 and sum.

[00:02:04]
All right. All right, this one is a little bit trivial compared to what an actual reactive system works like. But this has all the kind of key pieces and characteristics that we find in a reactive system. The key part is to understand that there's this global context that's kind of shared.

[00:02:33]
And all we're doing is kind of leveraging the stack in order to keep track of what's running and what's not running. And I guess for our sake, I mentioned earlier that I would implement it. Let's implement untrack, just because we can. I'm gonna export function untrack. Really all we have to do to implement untrack is basically for the underlying signals.

[00:03:06]
So we can go const prevContext = context. Context = [], run our function and say context = prevContext. Sorry, not a function. And so, if we do this whatever runs inside this function now, inside the read will not find the effect and will not subscribe. And what can we do here to, I'm trying to think of, I mean it's sort of uninteresting, but we can go untrack, count, and import untrack.

[00:04:05]
Assignment to a constant variable, did I use const of habit. Actually, no it's not this one the problem, this one's a problem, all right? Undefined, this is what you always wanna see. Count, count. [LAUGH] And it's important to return your results, [LAUGH] in your untrack function. So from there, essentially what we're seeing is we only seen the count of its initial value, I'll make it a 10 for now.

[00:04:50]
And even though we update it again, it doesn't run again, okay? So that is basically reactive fundamentals.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now