Arms-on with Stable: Reactive programming with alerts

Indicators and results

As a result of Stable elements are a perform name, they solely execute as soon as upon creation. Due to this fact, in case you had a sign that you just wanted to entry exterior of the template, you would need to wrap it in an impact. Contained in the JSX, you’ll be able to simply name the sign getter, like we’ve got simply accomplished with depend(), and it gives you the reactive worth because it modifications. Nevertheless, within the physique of the perform, you might want to use an impact:

console.log("Depend:",depend()); // ❌ not tracked - solely runs as soon as throughout initialization.

createEffect(()=>{  console.log(depend()); // ✅ will replace every time `depend()` modifications.
});
// snippet from the docs

So, useEffect is a sort of advert hoc observer for alerts. Anytime you might want to carry out some out-of-template impact based mostly on a sign, that’s what you might want to use. Between createSignal, createEffect, and the native reactivity of JSX, you will have a lot of the primary components of reactivity.

Fetching a distant API with createResource

Stable layers capabilities on high of the essential options of alerts. A kind of capabilities is createResource, which makes it simple to deal with asynchronous requests in a reactive method. It is a easy layer on high of createSignal. Let’s use it create a Joke element that fetches 10 jokes from the Joke API and shows them.