# Disallowed function call inside reactive context

A function that is not allowed to run inside a reactive context was called from within a reactive context.

For example, an `effect` cannot be scheduled from within a `computed` or an actively executing effect.
Avoid calling functions like `effect` as part of template expressions, as those execute in their own reactive context.

Computed expressions are expected to be pure.
Pure means that expression do not trigger any side effects.
Side effects are operations like scheduling `afterRender`, creating a new `effect`, or subscribing to observables.

Some operations are explicitly banned inside reactive contexts in order to avoid common pitfalls.
As an example, using `afterRender` inside a `computed` will schedule new render hooks every time the computed expression evaluates.
This is likely not intended and could degrade application performance.

### Fixing the error

This error guide is non-exhaustive.
It captures a few common scenarios and how to address the error.

#### `afterRender`
Move the call for `afterRender` outside of the reactive context.

A good place to schedule the after render hook is in the component's class constructor.
Alternatively, use `untracked` to leave the reactive context and explicitly opt-out of this error.

#### `effect`
Move the call for `effect` outside of the reactive context.

A good place to schedule an effect is in a `@Component`'s class constructor.

#### `toSignal`
Move the call for `toSignal` outside of the reactive context.

```typescript
result = computed(() => {
  const dataSignal = toSignal(dataObservable$);
  return doSomething(dataSignal());
});
```

can be refactored into:

```typescript
dataSignal = toSignal(dataObservable$);
result = computed(() => doSomething(dataSignal()));
```

Alternatively, if this is not possible, consider manually subscribing to the observable.

As a last resort, use `untracked` to leave the reactive context.
Be careful as leaving the reactive context can result in signal reads to be ignored inside `untracked`.

@debugging

The error message mentions the function that was unexpectedly called.
Look for this function call in your application code.

Alternatively, the stack trace in your browser will show where the function was invoked and where it's located.
