
Enter a search term above to see results...
Enter a search term above to see results...
Creating a Reaction using Reaction.create()
will provide the Reaction
instance itself as the first argument.
const mySignal = new Signal(0);
Reaction.create((reaction) => { // reaction is the Reaction instance console.log('Current value:', mySignal.get()); // do something with reaction});
The reaction
instance can be used to control the execution of your reaction after it runs under certain conditions.
You can permanently stop a reaction from running again, even if its Signal dependencies change, by calling the reaction.stop()
method.
Once stopped, the reaction will no longer track dependencies or execute its callback.
import { Signal, Reaction } from '@semantic-ui/reactivity';
const percentComplete = new Signal(0);Reaction.create((reaction) => { const currentPercent = percentComplete.get(); if(currentPercent < 100) { // updateProgress(currentPercent); console.log('Progress:', currentPercent); } else { console.log('Progress complete, stopping reaction.'); reaction.stop(); }});
progress.increment(80);progress.increment(20); // at 100 stoppingprogress.increment(50); // over 100 no longer updating
The reaction.firstRun
property (boolean) can be used to determine if the reaction is on its first execution.
This can be useful if you have special conditions for the initial run, or would like to prevent some side effects from running the first time code runs.
import { Signal, Reaction } from '@semantic-ui/reactivity';
const score = new Signal(0);
// Don't show the score unless the user has scored pointsReaction.create((reaction) => { const currentScore = score.get(); if (!reaction.firstRun) { console.log(`Score: ${currentScore}`); }});
Be sure that any Signal accesses (.get()
or .value
) necessary for your function are reachable during the first run, otherwise they will not be tracked as dependencies.
import { Signal, Reaction } from '@semantic-ui/reactivity';
const score = new Signal(0);
// This will never rerun because score.get() is never reached on first runReaction.create((reaction) => { if (!reaction.firstRun) { console.log(`Score: ${score.get()}`); }});