
Enter a search term above to see results...
Enter a search term above to see results...
Debugging reactive code can sometimes be challenging because the cause (a Signal change) and effect (a Reaction running) are decoupled.
Semantic UI provides several tools to help trace reactive updates.
When debugging JavaScript code using developer tools you can breakpoint and look at Reaction.current
which always holds a reference to the Reaction
instance that is currently executing its callback.
// why is this running ??someCustomCode() { console.log(Reaction.current); debugger; // create breakpoint}
To determine what caused the current reaction to run, use Reaction.getSource()
.
When a signal updates its value, it stores a stack trace which can be used to determine the exact location which caused the reaction to rerun.
// why are you running??someCustomCode() { console.log(Reaction.getSource()) /* outputs stack trace of signal set() for example:
at IntersectionObserver.onIntersection /src/components/ InPageMenu/InPageMenu.js:244:13) */}
When you are creating a template you might wonder why a particular condition is rerunning.
You can use the Template helper debugReactivity
to run Reaction.getSource()
inside the render function.
This will trigger a debugger;
breakpoint at that point in the template rendering process and also call Reaction.getSource()
in the console, helping you trace template updates.
{#if someCondition} <!-- Why is someCondition evaluating to true? !--> {debugReactivity}{/if}