Debugging Reactivity

Debugging reactive code can sometimes be challenging because the cause (a Signal change) and effect (a Reaction running) are decoupled.

Debugging Reactions

Semantic UI provides several tools to help trace reactive updates.

Current Reaction

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
}

Reactivity Source

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)
  */
}

Debugging Component Reactivity

Template Reactivity

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}