Fingers-on with Strong: Reactive programming with alerts

Alerts and results

As a result of Strong elements are a operate name, they solely execute as soon as upon creation. Subsequently, if you happen to had a sign that you simply wanted to entry exterior of the template, you would need to wrap it in an impact. Contained in the JSX, you possibly can simply name the sign getter, like we now have simply finished with depend(), and it will provide you with the reactive worth because it adjustments. Nonetheless, within the physique of the operate, it’s essential to use an impact:

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

createEffect(()=>{  console.log(depend()); // ✅ will replace at any time when `depend()` adjustments.
});
// snippet from the docs

So, useEffect is a sort of advert hoc observer for alerts. Anytime it’s essential to carry out some out-of-template impact primarily based on a sign, that’s what it’s essential to use. Between createSignal, createEffect, and the native reactivity of JSX, you’ve a lot of the fundamental components of reactivity.

Fetching a distant API with createResource

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