Function effect

Run an effect, reactively, based on the passed args.

Effects are an escape-hatch that can hurt performance. We acknowledge that there are real use cases where you need to escape the reactive system and instead of everyone implementing the same boilerplate to do so, this utility helps codify the reactive-system escapement.

Note that typically, applications that can get away with derived data will be easier to debug and have better performance.

This utility provides a safe way for you to get around infinite revalidation / infinite rendering protection errors at the cost of performance (in most cases, it won't be perceivable though -- unless you have a lot of effects in hot paths). It is strongly discouraged to use effects in loops, (such as #each), or any component that is rendered many times on a page.

This can be used in JS as well is a in templates. Note however, that re-runs will not occur if the JS is not being called from the template in some way. The template is our reactive interface.

import { effect } from 'reactiveweb/effect';

function log(...args) {
  console.log(...args);
}

<template>
  {{effect log "foo"}}

  {{effect (fn log "bar")}}
</template>
Copy

and from JS:

import { effect } from 'reactiveweb/effect';

function log(...args) {
  effect(...args);
}

<template>
  {{log "foo"}}
</template>
Copy

When using ember-modifier, you may use effect to turn any modifier in a sort of run-once modifier:

import { effect } from 'reactiveweb/effect';
import { modifier } from 'ember-modifier';

const runOnce = modifier((element, positional, named) => {
  effect(() => {
    // args accessed here are not auto-tracked
  });
});

<template>
  <div {{runOnce}}></div>
</template>
Copy

Note that if args are accessed outside of the effect, the modifier will re-run as the args change.

This may be done intentially for extra clarity in the non-modifier case, such as in this example

import { effect } from 'reactiveweb/effect';

function log(...args) {
  console.log(...args);
}

<template>
  {{effect log @trackedValue}}
</template>
Copy